我正在创建一个导航栏,其中有五个不同的链接。使用 div 元素,我创建了导航栏,然后将每个链接分隔到它自己的容器中。默认情况下,它们都挤在左侧,而不是在导航栏的中央。为了在没有完全错位的导航栏的情况下相处,我添加了近似宽度以使每个链接之间的距离相等;然而,它并没有完全对齐,我需要一种更专业的方式来使它们居中。
你可以直观地看到我在这里说的是什么:http://jsfiddle.net/W2Pez/2
您可以看到它们彼此之间的间隔并不相等。我计划从每个链接中删除宽度属性,那么如何在不使用宽度的情况下使每个链接彼此之间的像素数相同? 请注意,每个链接的容器宽度不能相同,因为,例如,“主页”剩余的空白空间量会比“房价和套餐”多很多。
CSS:
#nav {
background-color: #C08374;
height: 50px;
line-height: 50px;
width: 1000px;
margin: auto;
vertical-align: middle;
border: 1px solid #A76358;
}
.nav_button {
float: left;
text-align: center;
line-height: 50px;
}
HTML:
<div id="nav">
<div class="nav_button" style="width: 25px"></div>
<div class="nav_button" style="width: 175px">
<a href="index.html">Home</a>
</div>
<div class="nav_button" style="width: 250px">
<a href="rates.html">Rates & Packages</a>
</div>
<div class="nav_button" style="width: 175px">
<a href="about.html">About Us</a>
</div>
<div class="nav_button" style="width: 150px">
<a href="menu.html">Menu</a>
</div>
<div class="nav_button" style="width: 250px">
<a href="attractions.html">Nearby Attractions</a>
</div>
<div class="nav_button" style="width: 25px">
</div>
最佳答案
诀窍是将容器设置为 text-align: center
然后列出列表(它应该是 <ul>
设置为 display: inline-block
。这将使整个列表居中,然后您可以 float 列表元素并使用边距控制它们彼此之间的距离。
这是您的代码的精简版本:
HTML
<div id="nav">
<ul>
<li class="nav_button">
<a href="index.html">Home</a>
</li>
<li class="nav_button">
<a href="rates.html">Rates & Packages</a>
</li>
<li class="nav_button">
<a href="about.html">About Us</a>
</li>
<li class="nav_button">
<a href="menu.html">Menu</a>
</li>
<li class="nav_button">
<a href="attractions.html">Nearby Attractions</a>
</li>
</ul>
</div>
CSS
#nav {
background-color: #C08374;
border: 1px solid #A76358;
text-align: center;
}
ul {
list-style: none;
display: inline-block;
}
ul li {
float: left;
margin: 0 20px;
}
ul li a {
color: white;
}
关于css - 如何使这些导航按钮居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21149857/