37

我一直在四处寻找，但找不到适用于我自己问题的解决方案。

我正在开发一个移动网站，需要输入框为屏幕的 100% 宽度。但我有padding-left: 16px，margin: 5px这使得盒子走出屏幕，所以我必须向右滚动才能看到盒子的末端。如何使框 100% 减去填充和边距？

试试看：http: //jsfiddle.net/wuSDh/

4

6 回答 6

62

您可以使用calc，现代浏览器也支持它，IE9+ 也支持。

div {
  margin: 10px;
  width: calc(100% - 20px);
  height: 10px;
  background: teal;
}
<div></div>

浏览器支持

于 2013-07-13T16:34:58.647 回答
7

块级元素自然填充它们的父级，但是如果您专门设置宽度，您会覆盖此行为，允许将边距和边框添加到指定的宽度。您在 body 上指定 100% 的宽度，因此如果有一个元素渲染到它的右内边缘，它就有机会水平溢出文档。

示例：http: //jsfiddle.net/trex005/6earf674/

解决这个问题的简单方法是停止声明身体的宽度。如果出于某种原因需要这样做，您可以将边距设置为 0；同样的原理也适用于输入，但稍微复杂一些。输入（文本/密码）和文本区域，即使设置为显示为块，它们的宽度也会分别从大小和列中得出。这可以通过在 CSS 中指定宽度来覆盖，但是它们也有用户代理指定的边框和边距，因此您再次遇到溢出问题。要修复此溢出，您需要将输入的显示设置为阻止，并且它是 box-sizing:border-box。边框框将计算边框和填充作为宽度的一部分。

input[type="text"], input[type="password"] {
    width: 100% !important;
    margin: 5px !important;
    box-sizing:border-box;
    display:block;
}

一旦你这样做了，你会注意到元素之间有额外的间距。这是因为 display:block 强制换行，而<br>您添加的标签是多余的。去掉那些，你就开始做生意了！

演示：http: //jsfiddle.net/trex005/6earf674/1/

于 2015-01-20T22:20:18.020 回答
4

Looewidth:100%;然后简单地使用尽可能多的填充：

#login_box {
    padding:10px;
    margin:50px;
}

演示 http://jsfiddle.net/PFm3h/

隔离效果：

演示 http://jsbin.com/ozazat/1/edit

大量的填充，大量的边距，完全没有问题。

于 2013-07-13T15:41:13.290 回答
2

我遇到了 100% 高度的问题，最终让我震惊的是，答案是在 100% 高度/宽度（即父级）以上的元素上使用填充。

<div style="padding: 1rem;">
    <div style="height:100%; width:100%">
        <p>The cat sat on the mat</p>
    </div>
</div>

简而言之，parent 的 padding 和 child 的 margin 效果一样！

于 2019-01-17T12:14:26.060 回答
1

另一种解决方案是定位 INPUT 的绝对值并添加左/右道具：

#login_box {
    width: 100%;
    position:relative;
}

input[type="text"], input[type="password"] {
    position:absolute;
    left:5px;
    right: 5px
}

您需要调整边距等，因为它们将超出相对布局流程。您也可以毫无困难地添加填充，因为您没有设置固定宽度。

这种技术在所有浏览器中得到广泛支持。

演示：http: //jsfiddle.net/wuSDh/3/

于 2013-07-13T16:32:41.917 回答
-5

你可以调整你的文本框宽度 100% 到 95% 。现在看起来不错

input[type="text"], input[type="password"] {
    width: 95% !important;
    margin: 5px !important;
}

看到这个：http: //jsfiddle.net/wuSDh/

于 2013-07-13T15:46:38.250 回答