css如何让div横向排列

html-css04

css如何让div横向排列,第1张

可以使用弹性布局,display: flex 就可以让div横排,默认布局轴方向就是横向,justify-content: space-between可以是div平均分布在水平轴上。

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>