gpt4 book ai didi

css - 如何避免水平滚动条

转载 作者:太空宇宙 更新时间:2023-11-04 15:14:45 24 4
gpt4 key购买 nike

谁能看看我的代码

<html>
<div class="box">
<div class="txtFld">
<input type="text"/>
</div>
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
</div>
</html>

CSS 代码:

ul{margin:0;padding:0}
ul li{border-bottom:1px solid #f1f1f1;padding:5px}
.box{width:160px;overflow:auto;border:1px solid #ccc;height:150px}
.txtFld{-webkit-box-sizing:border-box;box-sizing:border-box;-moz-box-sizing:border-box}
.txtFld input{width:100%;}

水平滚动条出现在 chrome 和 ie 浏览器中。我哪里弄错了?

最佳答案

我知道这个问题很老,但答案是:

您必须在文本输入上设置 box-sizing:border-box 属性(而不是像您那样在他的父 div 上设置)。

它将正常工作,在 JSFiddle 中查看:http://jsfiddle.net/rE6xW/2/

这是因为文本输入默认有 padding(2px) 和 border(1px),当你将它的宽度设置为 100% 时,它是 100%+2*[padding+border]所以你得到一个水平滚动条,因为它比它的父级宽 6px。当您设置 box-sizing:border-box 属性时,您的 width:100% 属性将被解释为:

100% = innerWidth + padding + border

我希望这会对某人有所帮助。

.

关于css - 如何避免水平滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15116568/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com