不滚动地将列表项调整为并排显示_编程开发

不滚动地将列表项调整为并排显示

创始人

2024-12-24 18:02:57

0次

要将列表项调整为并排显示，可以使用CSS中的flexbox布局。下面是一个示例代码：

HTML代码：


  列表项1
  列表项2
  列表项3
  列表项4

CSS代码：

.list {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  overflow-x: auto;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.list li {
  flex: 0 0 auto;
  width: 200px;
  border: 1px solid black;
  padding: 10px;
}

在上面的代码中，通过设置.list的display属性为flex，使其成为一个flex容器。justify-content: space-between将列表项均匀分布在容器中，flex-wrap: nowrap防止列表换行。overflow-x: auto允许横向滚动，当列表项超出容器宽度时，会自动出现滚动条。

每个列表项.list li的宽度设置为200px，可以根据需要进行调整。.list li的flex: 0 0 auto属性表示列表项不可伸缩，并且不基于空间分配。

通过以上代码，列表项将会并排显示，如果宽度超出容器宽度则会出现水平滚动条。

上一篇：不滚动到视图 scrollIntoView scrollTo

下一篇：不滚动地转到特定的div

不滚动地将列表项调整为并排显示

相关内容

热门资讯