此示例菜单如何设置高度答案

【问题标题】：How Does This Sample Menu Set The Height此示例菜单如何设置高度
【发布时间】：2016-05-04 05:28:16
【问题描述】：

我在 W3Schools 上找到了这个菜单示例。我正在尝试在我的 MVC 布局页面上创建一个菜单栏。我看起来很邋遢，我喜欢这个的样子。我将它粘贴到我的网站上，它的工作原理如图所示，但我不明白它是如何设计的。我没有看到任何高度或垂直对齐设置。是填充样式吗？ ul 和 li 标签通常用于这种菜单吗？我会使用像 span 标签这样的东西，而不是 ul 或 li 标签。

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

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

li:last-child {
    border-right: none;
}

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

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li style="float:right"><a href="#about">About</a></li>
</ul>

</body>
</html>

【问题讨论】：

高度由padding 在li a 中设置。

标签： html css

【解决方案1】：

除了应用于链接的一些填充外，默认 CSS 样式设置了高度。 ul 元素的默认 CSS 高度是 auto，这意味着它将填充空间（即与子元素一样高）。

这意味着它正在获取链接的font-size / line-height 并添加padding，即顶部和底部均为14px。该高度成为整个列表/导航栏的高度。

【讨论】：

谢谢。您会说菜单中使用 ul/li 元素很常见，还是使用其他元素（可能是 span）更常见？
在我的意见中，通常使用 ul/li 元素作为菜单。对于 HTML 语义，菜单是带有行项目 (li) 的无序列表 (ul)，这是有道理的。将无序列表包装在nav（导航）元素中也可能有意义。