Css 指定一个宽度为100%并带有一些填充的div？

基本上，我有一个带有CSS的div：

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

浏览器显示因填充而产生的水平（宽度100%+7px）
请看这里：

---

我怎么能让那个div不显示单杠呢？（无需在内部添加另一个div？

摆脱

宽度：auto

并将其替换为

右侧：0

---

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

可以将div设置为显示

内联块：

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

这将以内联方式显示它（不水平拉伸），同时允许您仍然在顶部和底部应用填充和边距（与
显示不同：内联
摆脱宽度指定&只需指定
0px
；所有四个边

如果IE8+兼容性对您来说足够，您可以使用
如果您希望它仅在全宽范围内工作，请将
左侧
和
右侧
都设置为
0
，但不要设置
宽度
正确的HTML语义非常需要在其中包含另一个元素。在这种情况下，文本应该包装在
标记中

这样做会自动为您提供一些内容，以便在内部元素上设置
margin
或
padding

这就是说，如果你真的不能/不会有一个内部元素，那么移除你的
width
并设置
right:0
。绝对定位元素的妙处在于，如果你将相对位置设置为0，你可以“拉伸”元素（它也适用于顶部/底部）

或者，如果您的元素不是绝对定位的，您可以将
宽度：100%
更改为
最大宽度：100%
（或者添加
最大宽度
行，以处理旧版本IE中的错误，如果您必须返回那么远的话），这将硬封顶总宽度。此选项在此处起作用-。
您可以使用框大小：边框框CSS属性，该属性将从元素的实际宽度和高度中排除填充和边框：

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

这是小提琴：

有关框大小的更多信息/浏览器支持：
啊，我误解了，你的意思是水平滚动条。这很好……我真的很讨厌长方体模型。我希望有一天浏览器会用宽度值设置宽度