html – 防止>跨越线

html – 防止>跨越线,第1张

概述我有一个UL,在div中我设置了DIV,UL和LI的宽度.如果有的话我想要溢出滚动,所以我将溢出设置为auto.但是,当它太宽时,我似乎无法阻止LI跨越线.这是我正在使用的CSS: /* id of the containing div */#ul-container { width: 325px; border-style: solid; border-width: 1 我有一个ul,在div中我设置了div,ul和li的宽度.如果有的话我想要溢出滚动,所以我将溢出设置为auto.但是,当它太宽时,我似乎无法阻止li跨越线.这是我正在使用的CSS:

/* ID of the containing div */#ul-container {    wIDth: 325px;    border-style: solID;    border-wIDth: 1px;    border-radius: 4px;    border-color: #4297d7;    overflow: auto;}           /* this is the ID if the ul*/#selectable {    wIDth: 300px;    height: 75px;}#selectable .ui-selecting {    background: #ccc;}#selectable .ui-selected {    background: #4297d7;}li {    List-style: none;    overflow: auto;    wIDth: 300px;    margin-left: -25px;}

li中的溢出属性似乎没有做任何事情.当我把它放在div上时,无论是否需要,我都会获得水平滚动.任何帮助将不胜感激.

解决方法
#ul-container{  white-space: nowrap;}

white-space:nowrap会阻止孩子(li)进入新行.

Live demo here (click).

总结

以上是内存溢出为你收集整理的html – 防止>跨越线全部内容,希望文章能够帮你解决html – 防止>跨越线所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1074373.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-26
下一篇 2022-05-26

发表评论

登录后才能评论

评论列表(0条)

保存