Question

我在我正在处理的网站上使用导航栏时遇到了一些问题。我尝试使每个链接具有相同的填充，并使导航栏占用固定的宽度。到目前为止，我还无法弄清楚如何在所有链接上获得均匀填充。我也希望能够添加和删除链接，并保持填充甚至在相同的宽度内。我的代码如下。我只是使用了你看到的链接并且一直在弄乱数字，直到它看起来正确，但我希望能够更改链接而不必再次猜测并检查填充。任何帮助都会很棒。我也一直在寻找解决方案几天而找不到解决方案，但如果我遗漏了一些问题，这是一个重复的问题，我道歉。感谢。

HTML：

<div class="navbar">
    <ul>
        <li class="navbar-active"><a href="home.php">Home</a></li>
        <li ><a href="about.php">About</a></li>
        <li ><a href="registration.php">Registration</a></li>
        <li ><a href="attendees.php">Attendees</a></li>
        <li ><a href="schedule.php">Schedule</a></li>
        <li ><a href="faq.php">FAQ</a></li>
        <li ><a href="speakers.php">Speakers</a></li>
        <li ><a href="photos.php">Photos</a></li>
        <li ><a href="contact.php">Contact</a></li>
    </ul>
</div><!-- /.navbar -->

CSS：

/**
 * Navbar
 */

div.navbar{
  width:1000px;
  background-color: #E15532;
  text-transform: uppercase;
  height: 30px;
  line-height: 30px;
}

div.navbar ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
div.navbar ul li{
  float: left;
}
div.navbar ul li a{
  display: inline-block;
  margin: 0;
  padding: 0;
  font-weight: bold;
  text-decoration: none;
  color: #F7F6E2;
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: #AF4128;
  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: #AF4128;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #AF4128;
  padding-left: 16.67188px;
  padding-right: 16.67187px;
  text-align: center;   
}
div.navbar ul li a:hover{
  background-color: #AF4128;
}

Answer 1

您可以使用展示table，table-row和table-cell，这是我能想到的最佳解决方案。现场演示 - http://jsfiddle.net/ck1hbtzq/

.navbar {
    display: table;
    width: 1000px;
}

.navbar ul {
    display: table-row;
}

.navbar li {
    display: table-cell;
}

甚至在固定宽度内的导航栏链接上填充

1 个答案: