[分享]css列表横向有竖线隔开

在网页设计中，列表是一个非常重要的元素，可以用于展示产品、服务、文章等各种内容。为了让列表更加美观和规整，我们可以使用CSS来对列表进行样式的调整。今天，我们来讲一下如何使用CSS实现列表横向有竖线隔...

在网页设计中，列表是一个非常重要的元素，可以用于展示产品、服务、文章等各种内容。为了让列表更加美观和规整，我们可以使用CSS来对列表进行样式的调整。

今天，我们来讲一下如何使用CSS实现列表横向有竖线隔开的效果。

<ul class="list">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  <li>列表项4</li>
</ul> 

首先，我们需要先创建一个无序列表，并为其添加一个自定义的类名“list”。

.list {
  margin: 0;
  padding: 0;
  display: flex;
}

.list li {
  list-style: none;
  margin-right: 10px;
  border-right: 1px solid #eee;
  padding-right: 10px;
} 

接下来，在CSS中可以对列表的样式进行调整。我们需要将列表的默认样式清除掉，使其变成一行，这可以通过设置display属性来实现。而每一个列表项需要将其默认样式取消，并在右边添加一个竖线，这可以通过设置border-right属性来实现。

最后，我们只需要将每个列表项之间的间距去掉就可以了。

通过以上的CSS代码，我们可以轻松实现列表横向有竖线隔开的效果。