Question

基本上我有一个这个CSS的div：

.mydiv{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    padding:7px;   
}

浏览器显示填充的水平（宽度100％+ 7px）
看看这里：http://jsfiddle.net/3FrLq/

如何让div不显示水平条？（无需在里面添加另一个div？）

Answer 1

摆脱width:auto并将其替换为right:0。

由于您的元素绝对定位，您实际上可以将左侧和右侧拉到元素容器的边缘，而无需调用滚动条。

Answer 2

正确的HTML语义几乎要求你有另一个元素。在这种情况下，您的文字应包含在<p>代码中。

自动执行此操作会为您提供一些内容，以便在内部元素上设置margin或padding。

也就是说，如果确实不能/不会有内部元素，请删除width并设置right: 0。关于绝对定位元素的好处是，如果你将对立位置设置为0，你可以“拉伸”元素（它也适用于顶部/底部）。

或者，如果您的元素未定位，则可以将width: 100%更改为max-width: 100%（或添加max-width行，以处理旧版本中的错误IE，如果你必须回到那么远），这将硬化总宽度。这个就在这里 - http://jsfiddle.net/3FrLq/5/。

Answer 3

您可以使用box-sizing：border-box CSS属性，它将从元素的实际宽度和高度中排除填充和边框：

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border -box;

Answer 4

您可以将div设置为显示inline-block：

.mydiv{
    display: inline-block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    padding:7px;   
}

这将显示内联（不是水平拉伸），同时允许您仍然在顶部和底部应用填充和边距（与display: inline不同

Answer 5

摆脱宽度指定＆amp;只需指定0px;对于所有4个方面

Answer 6