这些导航按钮如何对中？
这些导航按钮如何对中？
提问于 2014-01-15 22:44:23
我正在创建一个导航栏，其中有五个不同的链接。使用div元素，我创建了导航条，然后将每个链接分离到自己的容器中。默认情况下，它们都挤到左边，而不是在导航条的中央。为了不出现一个完全不对齐的导航条，我增加了大致的宽度，使每个链接之间的间隔相等；然而，它并不是完全对齐的，我需要一种更专业的方法来对它们进行中心化。
你可以从视觉上看到我在说什么：http://jsfiddle.net/W2Pez/2
你可以看到，它们之间的间隔并不都是一样的。我计划从每个链接中删除宽度属性，那么如何使每个链接在不使用宽度的情况下彼此之间的像素数是相同的呢？请注意每个链接的容器不能是相同的宽度，因为例如，"Home“留下的空空间的数量将远远超过”Rate&Package“。
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>Stack Overflow用户
发布于 2014-01-15 22:57:54
诀窍是将容器设置为有text-align: center，然后将列表(应该是<ul>设置为display: inline-block )。这将使整个列表中心，然后您可以浮动列表元素，并使用边距控制它们之间的距离。
下面是您的代码的简化版本：
<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;
}这里有把小提琴。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21149857
复制相关文章
相似问题
腾讯云开发者
