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

Question

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

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;
}

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

Even padding on navbar links within a fixed width

html

css

jquery

navbar