所以我想在我的网站上有一个居中的导航菜单/栏,有点像 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
元素代替.
方法一:表格布局
.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>
方法二: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 - 我怎样才能拥有具有同样宽链接的完美居中导航栏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34244925/