1、新建html文档,在body标签中添加一个div标签,然后在这个div标签中添加一些div标签:
2、为外div标签和内div标签添加一些样式,由于div元素是块级元素,所以内div会在外div中垂直排列:
3、为内div添加“display: inline-block”样式,这时内div就会变成行级块元素,这样内div就会在div中横向排列了:
css设置ul的li 居中均匀排列,我们首先需要做的就是将这个ul的width和height确定,使用margin让ul居中,margin的用法如图:
,然后在设置li的width和height,然后给li一个float,通过代码来理解:
<html>
<head>
<style>
ul{
width:300px
height:30px
border:1px solid #f00
marign:0 auto
}
li{
width:50px
height:30px
float:left
}
</head>
<body>
<ul>
<li>名字1</li>
<li>名字2</li>
<li>名字3</li>
<li>名字4</li>
</ul>
</body>
</html>