如何在 CSS 中创建真正的水平列表？-css教程-PHP中文网

如何在 CSS 中创建真正的水平列表？

Susan Sarandon

发布： 2024-12-04 01:23:10

原创

743 人浏览过

How to Create a Truly Horizontal List in CSS?

创建水平列表项

尝试创建水平列表时，可能会遇到列表项不水平对齐的问题。为了解决这个问题，这里有一个简化的解决方案：

问题：

ul#menuItems li {
  display: inline;
  list-style: none;
  margin-left: auto;
  margin-right: auto;
  top: 0px;
  height: 50px;
}

登录后复制

使用 display: inline 和自动边距不会产生预期的结果。

解决方案：

ul > li {
    display: inline-block;
}

登录后复制

通过对列表项使用 display: inline-block ，它们将表现为水平流中的单独块。这可确保每个项目都包裹其内容并水平对齐。

以下是更新的代码片段：

ul#menuItems {
  background: none;
  height: 50px;
  width: 100px;
  margin: 0;
  padding: 0;
}
ul#menuItems li {
  display: inline-block;
  margin: 0;
  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;
}

登录后复制

<ul>

登录后复制

以上是如何在 CSS 中创建真正的水平列表？的详细内容。更多信息请关注PHP中文网其他相关文章！