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

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

spfLinux

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

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css 文章标签： ul li横排显示，100%，中间有border-right

本文链接：https://blog.youkuaiyun.com/spfLinux/article/details/80793907

css 专栏收录该内容

45 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做成的效果如下：

代码如下：

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做了自适应。