html页面中的多个连续的
标签在默认的情况下是竖向排列的,不过我们可以设置 li 标签的 CSS 样式,来使一个 ul 标签中的所有 li 标签都横向排列。多个 html 中 li 标签默认竖向排列
html代码html>
#pic_list li{
width:40px;
height:40px;
margin:3px;
background:red;
list-style: none;
}
运行结果:
通过下面,可以发现,在默认情况下,
- 中所有的
- 标签都是竖向排列的
li标签默认竖向排列
使用 css float 属性,使 li 标签横向排列
css代码改动下#pic_list li{
width:40px;
height:40px;
margin:3px;
background:red;
list-style: none;
/*加个一个 float 属性*/
float: left;
}
运行结果:
li标签水平横向排列
PS:由于 li 是块元素,可以使用 float: left; 让所有的 li 标签向左浮动,达到水平横向排行的效果
使用 css display 属性,使 li 标签水平排列
CSS代码修改如下:#pic_list li{
width:40px;
height:40px;
margin:3px;
background:red;
list-style: none;
/*加个一个 display 属性*/
display: inline-block;
}
PS: "display: inline-block",可以将 li 标签转换成行内块标签,以达到横向水平排列的效果。
更多推荐
html5图片的纵向排列,html 中的 标签横向排列的方法
发布评论