css 无序列表 横向

CSS 无序列表横向排列 在网页设计中，列表是一个非常常见的元素。通常，我们使用无序列表（ul）来呈现一组项目。然而，如果没有合适的样式，这些列表简单且单调。我们可以通过使用CSS来优化这些列表，并将它们呈现出更具有吸引力的外观。在这里，我们将演示如何使用CSS使无序列表横向排列。 首先，在HTML中创建一个无序列表，如下所示：

<ul>
  <li> Item 1 </li>
  <li> Item 2 </li>
  <li> Item 3 </li>
  <li> Item 4 </li>
</ul>

这应该是一个很熟悉的代码段。现在，我们将使用CSS使这些项水平排列。通过使用CSS属性display: inline-block，我们可以使项目像内联元素一样排列，同时仍然具有块元素的特性：

ul {
  list-style: none; /* 删除列表项的默认样式 */
  padding: 0; /* 删除默认内边距 */
}

li {
  display: inline-block; /* 设置为行内块元素 */
  margin-right: 20px; /* 添加一些间距 */
}

现在，我们已经成功使这些项目排列为一行！这种技术可以应用于许多元素，包括导航栏、脚注等。 总结 CSS 是一种非常重要的前端技术。通过使用 CSS，我们可以实现许多常见的布局和功能。无序列表是一个常见的元素，在许多情况下，我们需要将它们水平排列。通过使用CSS属性display：inline-block，我们可以轻松地实现这一点。