水平列表 CSS

在 HTML 中，水平列表通常用于展示一些相关的项目或链接，这些项目按照水平方向排列。CSS 可以用来增强水平列表的样式和排版，使其更加美观和易于阅读。

创建水平列表

水平列表可以使用 <ul> 和 <li> 元素创建，在 CSS 中使用 display: inline-block 属性将列表项横向排列。

<ul class="horizontal-list">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
</ul>

.horizontal-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.horizontal-list li {
  display: inline-block;
  margin-right: 10px;
}

.horizontal-list li:last-child {
  margin-right: 0;
}

添加样式

为了增强水平列表的视觉效果，可以使用 CSS 属性来改变文字样式、添加背景色或边框等。

.horizontal-list li a {
  display: block;
  padding: 5px 10px;
  color: #333;
  text-decoration: none;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.horizontal-list li a:hover {
  background-color: #ccc;
}

响应式设计

为了让水平列表在不同设备上都能够正常显示，可以使用响应式设计技术。例如，在较小的屏幕上，可以将列表项垂直排列，而不是水平排列。

@media screen and (max-width: 480px) {
  .horizontal-list li {
    display: block;
    margin: 10px 0;
  }
}

这些简单的技巧可以帮助程序员创建漂亮且易于阅读的水平列表，从而为用户带来更好的体验。