HTML – 我如何拥有完全居中的导航栏与同样宽的链接?

前端之家收集整理的这篇文章主要介绍了HTML – 我如何拥有完全居中的导航栏与同样宽的链接?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
所以我希望在我的网站上有一个居中的导航菜单/栏,有点像 Ovh’s website上的那个.我放了什么CSS(不包括颜色).这是我的HTML:
<div class = "nav">
        <div class = "top_page">
            <h1 class = "mainTitle">Exatreo</h1>
            <p class = "slogan">Slogan</p>
            <br/>
        </div>
        <div class = "container">
            <ul class="center-links">
                <a href="" class = "content" >Home</a></li>
                <a href="/about" class = "content" >About</a>
                <a href="/projects" class = "content" >Projects</a>
                <a href="/recruit" class = "content" >recruting</a>
                <a href="/help" class = "content" >Help</a>
            </ul>
        </div>
        <br />
        <br />
    </div>

谢谢!

@R_403_323@

首先,您的HTML无效,ul只能将li作为直接子项…但我们可以使用nav元素.

方法1:表格布局

.center-links {
  display: table;
  table-layout: fixed;
  width: 100%;
  text-align: center;
}
.center-links a {
  display: table-cell;
  border: 1px solid grey;
}
<div class="container">
  <nav class="center-links">
    <a href="" class="content">Home</a>
    <a href="/about" class="content">About</a>
    <a href="/projects" class="content">Projects</a>
    <a href="/recruit" class="content">recruting</a>
    <a href="/help" class="content">Help</a>
  </nav>
</div>

方法2:FlexBox

.center-links {
  display: flex;
  text-align: center;
}
.center-links a {
  flex: 1;
  border: 1px solid grey;
}
<div class="container">
  <nav class="center-links">
    <a href="" class="content">Home</a>
    <a href="/about" class="content">About</a>
    <a href="/projects" class="content">Projects</a>
    <a href="/recruit" class="content">recruting</a>
    <a href="/help" class="content">Help</a>
  </nav>
</div>

猜你在找的HTML相关文章