Question

任何人都可以查看我的代码

<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浏览器中。我哪里弄错了？

Answer 1

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

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

它会正常工作，请在JSFiddle：http://jsfiddle.net/rE6xW/2/

中查看

这是因为默认情况下文本输入有填充（2px）和边框（1px），当你将它的宽度设置为100％时，它是100%+2*[padding+border]所以你得到一个水平滚动条，因为它宽6px而不是它的父母。设置box-sizing:border-box属性后，您的width:100%属性将被解释为：

100％= innerWidth + padding + border

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

Answer 2

因为

.txtFld input{width:100%;}

更改为

.txtFld input{width:50%;}

或任何适合的

Answer 3

如果您只需要隐藏滚动条，请使用

.box::-webkit-scrollbar {
    display: none;                                                          
}

for Chrome

Answer 4

假设您不希望任何带有“box”类别的元素上的滚动条，您需要将溢出设置为隐藏。

.box {
  border: 1px solid #CCC;
  height: 15px;
  overflow: hidden;
  width: 150px;
}

如果您只想禁用水平滚动条，请将 overflow-x 设置为隐藏。

overflow-x: hidden;

如果您不希望整个页面都有水平滚动条，那么您需要在 body 标记上设置 overflow-x 。

body { overflow-x: hidden; }

Answer 5

您的文本框宽度是否被覆盖在项目中的其他位置？

.txtFld input{
  width:100%;
}

当从您提供的代码中删除它时，它似乎只在IE和Chrome中有一个水平条，但在Firefox中运行正常。也许仔细检查你的CSS文档和HTML。

Answer 6

只需将.txtFld的宽度设置为auto：

.txtFld input {
  width:auto;
}

如何避免水平滚动条

6 个答案: