css ul li 如何实现 横向排列

html-css016

css ul li 如何实现 横向排列,第1张

因为li是块级元素，默认占一行的，要想实现横向排列，一般通过以下两个方法：

float:left

这样设置有一个问题，li浮动以后则脱离了文本流，即不占位置，如果它的父级元素有具体的样式且没有固定宽高，建议父元素清除浮动，或者设置固定宽高

display:inline-block

即把li变为行内元素且可以设置宽高以及边距，这样也有一个问题，低版本的Ie浏览器不兼容inline-block，建议在其后再加两个属性兼容低版本ie

*display:inline

*zoom:1

使用float属性，使他横向排列即可。

<style>

ul,li{padding:0margin:0list-style:none}

ul{width:1000px}

ul li{float:leftwidth:200px}/**li标签float属性，使他左浮动**/

ul li a{display:blockwidth:100%padding:20px 0 text-align:center}

</style> <ul>

    <li><a href="#">菜单一</a></li>

    <li><a href="#">菜单一</a></li>

    <li><a href="#">菜单一</a></li>

    <li><a href="#">菜单一</a></li>

    <li><a href="#">菜单一</a></li>

</ul>

具体效果根据自身项目，调节即可！

把ul包含的li定义为一个类，在css样式用类选择器设置li的float属性为向左浮动，

即为float：left；

最好将无序列表前面的点去掉。即ul的list-style-type：none；这样设计出来的比较美观。

扩展资料：

CSS 列表属性(list)

1.list-style    简写属性。用于把所有用于列表的属性设置于一个声明中。  

2.list-style-image    将图象设置为列表项标志。  

3.list-style-position    设置列表中列表项标志的位置。  

4.list-style-type    设置列表项标志的类型。