码迷,mamicode.com
首页 > 其他好文 > 详细

奇数个元素均分宽度

时间:2018-09-04 00:13:13      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:head   height   splay   col   html   ack   知识   子集   round   

刚开始实习,从改页面代码开始做起,以前学的前端知识也就只记得一些基础了,实践的内容都忘了。最近修改一个页面,需要将三个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;均分父级元素。

 

奇数个元素均分宽度

标签:head   height   splay   col   html   ack   知识   子集   round   

原文地址:https://www.cnblogs.com/liu-sheng/p/9581736.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!