0

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

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

4

6 回答 6

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% = 内部宽度 + 填充 + 边框

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

.

于 2014-07-10T12:14:40.257 回答
0

这是因为

.txtFld input{width:100%;}

改成

.txtFld input{width:50%;}

或任何适合的

于 2013-02-27T16:06:17.883 回答
0

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

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

铬

于 2013-02-27T16:07:12.117 回答
0

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

.txtFld input {
  width:auto;
}
于 2013-02-27T19:20:34.680 回答
0

假设您不希望在任何具有“box”类的元素上出现滚动条，则需要将overflow设置为hidden。

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

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

overflow-x: hidden;

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

body { overflow-x: hidden; }
于 2013-02-27T16:12:41.003 回答
0

您的文本框宽度是否被项目中的其他地方覆盖？

.txtFld input{
  width:100%;
}

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

于 2013-02-27T16:14:29.130 回答