CSS ul宽度大于外部宽度 ul中li自动换行,怎么让他不换行

我在网上也找了些方法。
#myTab ul{
list-style-type:none;
line-height:27px;
margin:0;
padding:0px;
display:block;
overflow:hidden;
white-space:nowrap;
float: left;
}
#myTab ul li{
display:block;
float:left;
border:1px solid #ace;
border-bottom:0px;
margin-right:3px;
padding:3px;
padding-left: 10px;
padding-right:10px;
cursor: pointer;
}
我将ul 和li的样式设置之后 。添加li,当ul宽度大于外面的div宽度时。他就换行了。
不知道问题出在那里。求围观。

外层div设个可见区域宽度,同时益处隐藏。
li左浮动,接下来是重点啦!!!!
设置ul宽度,设一个大一些的值,例如5000px,或者用脚本来动态计算赋值也行。这样就能实现你想要的效果。哎,当初刚学时这都不叫事,好久没用了,现在也遇到这个问题了,墨迹了半天才发现原因......
温馨提示:内容为网友见解,仅供参考
第1个回答  2013-01-04
myTab ul li 里面的display:inline ,理论上就不换行了, 但是 本身你里面的宽度大于外面的就不对! 或者你可以让里面滚动 overflow:scroll;追问

试过了 。没用。为什么本身的宽度大于外部宽度就不行呢? 我想实现滚动的效果就要内部的ul宽度大于外部div宽度。

追答



无标题文档

.layout{ width:100px; height:65px; overflow:scroll; padding:0px; margin:0px; background:#CCC;}
.layout ul{ list-style:none; padding:0px; margin:0px; width:1000px; height:25px; line-height:25px;}
.layout ul li{ padding:0px; margin:0px; line-height:25px; width:400px; line-height:25px; float:left; display:inline;}

横向滚动横线滚动
横向滚动横线滚动

把最外层的css样式里面设置 overflow:scroll;就行了 这回懂了吗

第2个回答  2017-06-26
设置UL高度和宽度并且设置overflow:hidden;
第3个回答  2013-01-04
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
声明文件头了吗?
第4个回答  2013-02-04
设置UL的宽度。。可以each每个li,计算总的li宽度

CSS ul宽度大于外部宽度 ul中li自动换行,怎么让他不换行
设置ul宽度,设一个大一些的值,例如5000px,或者用脚本来动态计算赋值也行。这样就能实现你想要的效果。哎,当初刚学时这都不叫事,好久没用了,现在也遇到这个问题了,墨迹了半天才发现原因...

...如何使它宽度超过ul以后依然不自动换行,成横排显示?
设置ul一个固定的宽度,如:width:1000px 设置ul横向超出后自动。overflow-x:auto 设置ul竖向超出隐藏 有足够多的li,li的width设置为100px ,li的数量最少为11个 因为li数量多,导致ul会出现横向滚动条,这样就实现了想要的效果

使li不会因为div宽度限制而换行该怎么实现?
不考虑脱离文档流的话,就给ul加个position:absolute 吧

css div里的ul li换行问题
你可以用CSS搞定!给UL或LI设置一个宽度就行,显示超过了宽度就会换行。

css float 强制不换行问题
把ul的position去掉,给你的ul加一个很大的width,一定要是所有li的总和,这样,不管你的li有多少,都不会换行了

如何使ul中li元素横向排列且不换行
横向排列需要在CSS中设定一个浮点,属性名为float 设定为Left 或者 Right 这两个有差别 如果是Left 它会往左开始 1 2 3 4 如果是 Right是 往右开始 4 3 2 1 代码可以这么写 lt;style;.LinkUl { float:left; } lt;\/style;lt;div ;lt;h3;lt;b;友情链接lt;\/b;lt;\/h3;lt;ul id=...

ul和li组成的行列排布时,行与行之间会连在一起,怎么才能使他们行与行...
用owollkoll说的clear,或者你给这一块的大div加上个 { width: 500px; hight: auto; overflow: hidden; border: none;}

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

css有办法让ul>li>ul>li这个最后面的这个li与旁边ul>li>ul>li这个后面...
把里面的ul的宽度设为与父级的li同宽即可,最简单就是 width:100 当然如果父级的li与祖父级的ul也不同宽,那么父级li也要设为 width:100 还有一点,就是如果背景色(绿色)是设在最底层的li的,那么li的宽度也要设为 width:100

css div里的ul li换行问题
浮动是float clear是清除浮动

相似回答