ul li横排显示，100%，中间有border-right的做法

最新推荐文章于 2023-06-02 11:12:44 发布

原创最新推荐文章于 2023-06-02 11:12:44 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ul li横排显示，100%，中间有border-right

css 专栏收录该内容

44 篇文章

订阅专栏

本文介绍了一种使用Flex布局实现网页中自适应效果的方法。通过设置容器的display属性为flex，并结合flex-direction属性，实现了列表项在不同屏幕尺寸下的自适应排列。此方法适用于创建响应式设计的网页应用。

做成的效果如下：

代码如下：

html:

<ul class="list2">
		<li>问卷</li>
		<li>结果</li>
	</ul>

css:

.index .list2{
	width: 100%;
	display: flex;
	flex-direction: row;
}

.index .list2>li{
	display:block;
	float: left;
	width: 50%;
	height: 20vh;
	line-height: 20vh;
	text-align: center;
	cursor: pointer;
}

.index .list2>li:nth-child(1){
	border-right: 1px solid #ddd; 
}

这里只要是用display:flex做了自适应。