所以我希望在我的网站上有一个居中的导航菜单/栏,有点像
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>
谢谢！
解决方法
首先,您的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>
.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>
