为什么我的水平列表项目无法正确显示？

水平列表项目：故障排除和解决方案

在尝试为网站创建水平列表时，您遇到了问题尽管应用了通常建议的解决方案，例如将“浮动”设置为左侧。为了诊断和解决这个问题，让我们检查一下提供的 HTML 和 CSS 结构。

ul#menuItems {
  background: none;
  height: 50px;
  width: 100px;
  margin: 0;
  padding: 0;
}
ul#menuItems li {
  display: inline;
  list-style: none;
  margin-left: auto;
  margin-right: auto;
  top: 0px;
  height: 50px;
}
ul#menuItems li a {
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
  font-weight: bolder;
  color: #000;
  height: 50px;
  width: auto;
  display: block;
  text-align: center;
  line-height: 50px;
}

分析

提供的代码结构几乎是正确的。但是，您已将“li”元素的“display”属性设置为“inline”而不是“inline-block”。这可以防止元素水平流动。

解决方案

要创建水平列表，请将“li”元素的“display”属性修改为“inline-” CSS 中的“块”：

ul#menuItems li {
  display: inline-block;
}

通过按照建议更新 CSS，您的列表项现在将水平显示，正如预期的那样。

以上是为什么我的水平列表项目无法正确显示？的详细内容。更多信息请关注PHP中文网其他相关文章！