问题使边框与我的div高度相同

Question

我试图使导航栏与屏幕快照上的导航栏完全相同，但是这样做有问题，页面上还有其他列表，这会造成麻烦。

这就是我所做的

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
  border-right: 1px solid black;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
}

<div id="nav">
  <ul>
    <li><a href="#anchor1">Partie 1</a></li>
    <li><a href="#anchor2">Partie 2</a></li>
    <li><a href="#anchor3">Partie 3</a></li>
    <li><a href="#anchor4">Partie 4</a></li>
  </ul>
</div>

Answer 1

所以看来您真正的问题是如何使导航看起来像图片中的那样。

为了更清楚地说明这一点，我继续在#nav元素周围添加了边框。

您应该摆脱float:left，而应将li设置为display : inline-block。

然后将填充从a标记移至li标记。

然后将垂直填充减小到所需的高度。我认为这足以获得所需的外观。

  

页面上还有其他列表，这会引起麻烦。

您应该使用类，然后使用css selectors。您不仅应将ul和li添加到元素中，然后再在CSS中选择它们。

在下面的示例中，我只是基于ID为nav的根元素选择了它们。因此，现在，此CSS应该不会影响您页面上的其他任何内容。

#nav {
  width : 100%;
  border : 1px solid black;
}

#nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#nav li {
  display : inline-block;
  padding: 8px 16px;
  border-right: 1px solid black;
}

#nav li a {
  color: black;
  text-align: center;
}

<div id="nav">
  <ul>
    <li><a href="#anchor1">Partie 1</a></li>
    <li><a href="#anchor2">Partie 2</a></li>
    <li><a href="#anchor3">Partie 3</a></li>
    <li><a href="#anchor4">Partie 4</a></li>
  </ul>
</div>