需要准备的材料分别有:电脑、浏览器、html编辑器。
1、首先,打开html编辑器,新建html文件,例如:index.html,编写问题基础代码。
2、在index.html中的<style>标签中,输入css代码:li{padding-left: 50px}。
3、浏览器运行index.html页面,此时li样式点与内容的距离设置到了50px。
可以包含, <ul><li></li></ul>是一个无序列表的标签,中间可以签到<div> div是一个行级标签,它们之间没有什么必然的联系。HTML部分:
<div id="nav">
<ul>
<li>AAAA</li>
<li>BBBB</li>
<li>CCCC</li>
<li>DDDD</li>
<li>EEEE</li>
<li>FFFF</li>
</ul>
</div>
css部分:
#nav{
margin: 0 auto
border: 2px solid #00CED1
}
ul,li {
margin: 0px
padding: 0px
list-style: none
}
ul{
display: flex
flex-direction: row
flex-wrap: wrap
}
li{
border: 1px solid
width: 100px/*每个元素的初始化宽度*/
text-align: center
margin-top: 10px
margin-bottom: 10px
flex:auto /*这是关键*/
}
扩展资料:
Flex是Flexible Box的缩写,用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
采用Flex布局的元素,被称为Flex容器(flex container),简称“容器”。其所有子元素自动成为容器成员,成为Flex项目(Flex item),简称“项目”。
容器默认存在两根主轴:水平方向主轴(main axis)和垂直方向交叉轴(cross axis),默认项目按主轴排列。
main start/main end:主轴开始位置/结束位置;
cross start/cross end:交叉轴开始位置/结束位置;
main size/cross size:单个项目占据主轴/交叉轴的空间;
设置在容器上的属性有6种。
flex-direction
flex-wrap
flex-flow
justify-content
align-item
align-content