[分享]css列表放同一水平

你是否曾经遇到过要让多个列表项放在同一水平位置的问题？这时我们就可以使用 CSS 来实现。下面我们就来看一下如何使用 CSS 来放置同一水平的列表。ul { liststyletype: none; ...

你是否曾经遇到过要让多个列表项放在同一水平位置的问题？这时我们就可以使用 CSS 来实现。下面我们就来看一下如何使用 CSS 来放置同一水平的列表。

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

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

li a:hover {
  background-color: #ddd;
} 

首先我们需要将列表的样式设置成无序列表 (<ul>) 的样式，同时设置它的内边距和外边距为零，以便让列表项 (<li>) 更好的排列。接着我们对列表项设置 float: left;，这样它们就可以放在同一水平位置了。

为了使列表项能够点击，我们将列表项中的链接 (<a>) 设置成块级元素 (display: block;)，并设置它的文本对齐方式为居中。最后，我们对鼠标悬浮在链接上的状态进行了设置。

<ul>
  <li><a href="#">首页</a></li>
  <li><a href="#">新闻</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">关于我们</a></li>
</ul> 

以上是 CSS 代码。我们还需要在 HTML 中添加无序列表 (<ul>) 和列表项 (<li>) 的代码，同时添加超链接 (<a>) 指向对应的页面。

通过以上步骤，我们就可以使用 CSS 来放置同一水平的列表了，下面是效果图：