zcgw.net
当前位置:首页 >> ul li 横排 >>

ul li 横排

ul { margin:0; padding:0; } li { float:left; } 1 2 3

li默认是块级元素,即每行只能显示一个。你可以设置器display样式为inline ul li { display :inline; }

1 2 3

用float:left,可以横向排列 用css 设置ul{list-style:none;}去掉li前边的东西

CSS中定义一下li的修饰li { list-style-type: none; display: inline; }

那你就每个li给它定义一个样式, 如果li横排显示,则用margin-left , margin-right. 如果li坚排显示,则用margin-top , margin-bottom. 另外padding也可以。

设置ul的margin-left即可 li横排时相互间的距离通过各自的width和margin-left(或margin-right)设置

.box{width:500px;height:500px;overflow:hidden;}li{width:100px;height:300px;float:left;background:green;margin:10px;}ul{width:999999px;}

li设置为float后,超过容器宽度它就会换行,这是正常的。你可以给ul设置一个相当于全部li宽度的总宽度。通过ul来控制,由于上层div设置了overflow:hidden,所以超出的部分不会被显示的。

横向排列需要在CSS中设定一个浮点,属性名为float 设定为Left 或者 Right 这两个有差别 如果是Left 它会往左开始 1 2 3 4 如果是 Right是 往右开始 4 3 2 1 代码可以这么写 .LinkUl { float:left; } 友情链接 这是第一列的第一个 这是第一列的第...

网站首页 | 网站地图
All rights reserved Powered by www.zcgw.net
copyright ©right 2010-2021。
内容来自网络,如有侵犯请联系客服。zhit325@qq.com