奇数个元素均分宽度

Posted 2021-01-03 liu-sheng

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了奇数个元素均分宽度相关的知识，希望对你有一定的参考价值。

刚开始实习，从改页面代码开始做起，以前学的前端知识也就只记得一些基础了，实践的内容都忘了。最近修改一个页面，需要将三个li均匀分布在同一排，折腾了好一会，然后看见别人博客的用法学会处理，在这里记下来。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
    <title>标题</title>
	<style>
		#aa{
		  display:flex;
		  width:100%;
		  height:10rem;
		}
		.bb{
		  flex:1;
		  text-align:center;
		}
	</style>
</head>
<body>
	<div style="width:100%;background-color:grey;">
		<ul id="aa">
			<li class="bb">第一个</li>
			<li class="bb">第二个</li>
			<li class="bb">第三个</li>
		</ul>
	</div>
</body>

　　使用的是css3的一个flax属性，父级元素用display：flex；布局，子集元素用flex：1；均分父级元素。

以上是关于奇数个元素均分宽度的主要内容，如果未能解决你的问题，请参考以下文章

qtablewidget怎么设置列宽度均分窗口宽度