css - 指定一个宽度为 100% 的 div 和一些填充？

Question

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

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

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

我怎样才能让那个 div 不显示水平条？（无需在里面添加另一个 div？）

score 5 · Accepted Answer

去掉width:auto并将其替换为right:0.

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

score 2 · Accepted Answer

正确的 HTML 语义几乎要求您在其中有另一个元素。在这种情况下，您的文本应该包含在<p>标签中。

这样做会自动给你一些东西来设置margin或padding内部元素。

也就是说，如果您真的不能/不会有内部元素，请删除您的width和 set right: 0。绝对定位元素的妙处在于，如果将相对位置设置为 0，则可以“拉伸”元素（它也适用于顶部/底部）。

或者，如果您的元素没有绝对定位，您可以更改您的width: 100%to max-width: 100%（或添加该max-width行，以处理旧版本 IE 中的错误，如果您必须返回那么远），这将硬盖总宽度。这个在这里起作用 - http://jsfiddle.net/3FrLq/5/。

score 2 · Accepted Answer

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

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

这是小提琴：http: //jsfiddle.net/3FrLq/3/

score 1 · Accepted Answer

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

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

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

score 1 · Accepted Answer

1

摆脱宽度指定＆只指定0px; 适用于所有 4 面

于 2012-11-13T20:37:24.477 回答

score 1 · Accepted Answer

6 回答 6