css设计li一行排列，溢出部分不换行 [ 备忘记录 ] |
您所在的位置：网站首页 › li标签内容换行 › css设计li一行排列，溢出部分不换行 [ 备忘记录 ] |
|
工作上遇到过两次该问题，导致耽误了不少时间。这次记录下，已备下次再忘记。 想要的效果如下：
--------------分割线--------------------------- html结构如下： 新板待测 新板待测 新板待测 新板待测 新板待测 新板待测 新板待测 新板待测 新板待测 新板待测 新板待测 新板待测 新板待测 新板待测 新板待测P.S.一开始想的是不要最外层的div标签来实现，后来发现那样不对，根本没法实现！ -------------------------分割线------------------------------- CSS样式如下： ul{ list-style: none; height: 20px; margin: 0px; padding: 0px; overflow: hidden; background-color: brown; width:5000px; } ul li{ float:left; background-color: chocolate; } div{ overflow: hidden; width: 220px; height: 20px; background-color: black; padding: 0px; margin: 0px; }在CSS样式里，就是普通的横向排序。但最关键的语句不是网上说的什么设置display:block、display:inline或是white-space: nowrap等（不管给ul或li设置都一样无效）； 只是需要给ul设置宽度，大于外层div的宽度，就能实现想要的效果！ 本人一开始没想到这，总主观认为li已经设置浮动向左，那应该就是一条直线，没想到ul的宽度是默认随上级宽度来指定的。 这里发个帖子做个备忘，也希望能帮助后来者。
|
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |