www.1862.net > Css中Li的横向排列自适应宽度的问题

Css中Li的横向排列自适应宽度的问题

当父元素和子元素都没有定义宽度的情况下实现水平居中: display:inline-block 可以使用text-align:center和display:inline-block相结合,这个技巧需要一个父元素。 1、HTML代码: 代码如下: Home … 2、CSS代码: 代码如下: .navbar { text-align:...

将li的样式设置成以下例子: display:inline;line-height:24px;height:auto;word-break:break-all;word-wrap : break-word ; 可以修改一下,到适合你的要求。

试试: li{ float:left; margin:18px;} 例: li{ float:left; margin:18px;} Helo WorldHelo WorldHelo WorldHelo WorldHelo WorldHelo World大家好,大家好,好好好Helo WorldHelo World 大家好,大家好,好好好Helo WorldHelo World

.mage_box{ list-style:none; width:1000px; margin:0px auto;} .mage_box li{ width:230px; height:200px; background-color:#ccc; float:left; margin:0px 20px 10px 0px;} 楼主看下是不是这样的效果,把对应的宽度值换成你要的宽度就可以了

设置ul一个固定的宽度,如:width:1000px 设置ul横向超出后自动。overflow-x:auto 设置ul竖向超出隐藏 有足够多的li,li的width设置为100px ,li的数量最少为11个 因为li数量多,导致ul会出现横向滚动条,这样就实现了想要的效果

改成就好了 你就设置100PX宽他当然浮动不上去。而且你还设置了多余部分隐藏

使用超出隐藏即可…或者用程序设置字符最大宽度 比如20个汉字40个字节 程序的我不会 但用纯css你可以设置固定宽度和高度然后设置overflow:hidden; ul为什么要大于外部宽度?搞不懂……

代码我理过了,写的太想当然了,导致繁杂。 你的问题解决方法也很简单,要求换行就直接给换行命令就好了: (ps:要突出种类并换行,直接用换行指令就行了,li里面再套一个ul完全就是自找麻烦,最简单分两+组合都比这样写来的实在。)

给li padding值,不给固定宽度, 你可以看看下面代码,百度不让发代码,看图片吧

将display:inline 改成 display:inline-block 就大功告成了。将一行的li元素视作类似div的盒子,这样width就能生效了。而不是对文字的属性才有效果

网站地图

All rights reserved Powered by www.1862.net

copyright ©right 2010-2021。
www.1862.net内容来自网络,如有侵犯请联系客服。zhit325@qq.com