Question

我正在创建一个导航栏，其中有五个不同的链接。使用div元素，我创建了导航栏，然后将每个链接分成了自己的容器。默认情况下，它们都会向左侧挤压，而不是在导航栏中居中。为了在没有完全错位的导航条的情况下相处，我添加了近似宽度，以便将每个链接相互间隔开来;然而，它并没有完全一致，我需要一种更专业的方式来集中它们。

您可以在视觉上看到我在这里谈论的内容：http://jsfiddle.net/W2Pez/2

你可以看到他们并非所有人都彼此间隔开。我打算从每个链接中删除宽度属性，那么我该如何制作它以使每个链接的距离相同，而不使用宽度？ 请注意，每个链接的容器宽度不能相同，因为，例如，＆＃34; Home＆＃34;将比＆＃34;费率＆amp;包＆＃34;

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 &amp; 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>

Answer 1

诀窍是将容器设置为text-align: center，然后将列表设置为<ul>设置为display: inline-block。这将使整个列表居中，然后您可以浮动列表元素并使用边距控制它们彼此之间的距离。

以下是您的代码的精简版本：

<强> 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 &amp; 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;
}

<强> Here's a fiddle

如何将这些导航按钮居中？

1 个答案: