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