Question

我有一个导航菜单链接，在div标签的底部有一个额外的空格，其id为nav。这不是因为边距或填充，而是有某种空格不允许ul标签用nav的id触及div的底部。我怎么做到这一点。这是link

* {
  padding: 0;
  margin: 0;
}
#nav {
  border: 1px solid black;
  text-align: center;
  min-width: 300px;
}
#nav ul {
  padding: 10px 0;
  display: inline-block;
}
#nav li {
  float: left;
  list-style: none;
  margin-left: 50px;
}
#nav a {
  text-decoration: none;
  color: black;
  padding: 15px 10px;
}
#nav a:hover {
  color: white;
  background: black;
}

<div id="nav">
  <ul>
    <li><a href="#">link</a>
    </li>
    <li><a href="#">link</a>
    </li>
    <li><a href="#">link</a>
    </li>
    <li><a href="#">link</a>
    </li>
  </ul>
</div>

Answer 1

间隙是给予下降文本元素（例如j，y，g）的保留空间。将Access_Token添加到vertical-align:top

即可将其删除

＆＃13;

<ul>

＆＃13;

* {
  padding: 0;
  margin: 0;
}
#nav {
  border: 1px solid black;
  text-align: center;
  min-width: 300px;
}
#nav ul {
  padding: 10px 0;
  display: inline-block;
  vertical-align: top;
}
#nav li {
  float: left;
  list-style: none;
  margin-left: 50px;
}
#nav a {
  text-decoration: none;
  color: black;
  padding: 15px 10px;
}
#nav a:hover {
  color: white;
  background: black;
}

＆＃13;

请注意，由于您应用于<div id="nav"> <ul> <li><a href="#">link</a> </li> <li><a href="#">link</a> </li> <li><a href="#">link</a> </li> <li><a href="#">link</a> </li> </ul> </div>的填充可以调整，因此列表项会在div下面显示。

Answer 2

从您的margin-left: 50px;中移除#nav li。它会在您的菜单上创建不需要的空白区域。菜单的宽度取决于文字的长度

Answer 3

似乎与内联块有关。 inline-flex或display：table;

没有空格

#nav ul {
  padding: 10px 0;
  display: inline-flex;
  background-color: black;
}

内联块最大的问题是它处理字体，它增加了一个幽灵＆＃39;填充＆＃39;每个元素后4到5个像素，具体取决于浏览器。

这是一个使用font-size：0方法来取消效果的重写。

＆＃13;

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box; /* allow percentages to be calculated without border and padding messing things up */
}
#nav {
  border: 1px solid black;
  min-width: 300px;
}
#nav ul {
  list-style-type: none;
  font-size: 0; /* font-size: 0; is a method to remove the ghost padding added after inline-blocks, one of the many reasons display: flex is becoming so popular */
}
#nav li {
  display: inline-block;
  width: 25%; /* control width here */
  text-align: center;
}
#nav a {
  display: block; /* allow element to expand to match parent size by changing from <a> default display: inline to block */
  text-decoration: none;
  color: black;
  font-size: 15px; /* reset font-size here */
  line-height: 30px; /* control element height here */
}
#nav a:hover {
  color: white;
  background: black;
}

＆＃13;

<div id="nav">
  <ul>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
  </ul>
</div>

＆＃13;

<强>拨弄

https://jsfiddle.net/Hastig/wfrxgxjm/

Answer 4

要解决您的问题，请执行以下操作：

将#nav ul更改为：

#nav ul {
    padding: 10px 0;
}

将#nav li更改为：

#nav li {
    display: inline-block;
    list-style: none;
    margin-left: 50px;
}

如何从div /容器

4 个答案: