输入字段宽度由余量不受影响

Question

我有一个非常简单的问题。如预期输入元素类型不受保证金。我猜测，输入具有某种默认样式的事情是使其行为异常的。

预期的结果是，当我申请的5个像素的余量，输入字段具有5像素缓冲器完全包围它。会发生什么事，而不是在于它具有在顶部，左侧和底部有5像素的缓冲区，但不正确的。

* {
  margin: 0px;
}

input {
  display: inline-block;
  background-color: green;
  border: none;
}

div {
  background-color: yellow;
}

.width-100 {
  width: 100%;
  background-color: blue;
}

.width-50 {
  display: inline-block;
  width: 50%;
  background-color: red;
}

.margin-10px {
  margin: 10px;
}

.padding-10px {
  padding: 10px;
}

<div class="width-100">
  <div class="width-50">
    <input class="margin-10px" value="This input should be filling in all the way to the right"></input>
  </div>
  <!--
       -->
  <div class="width-50">
    <div class="margin-10px padding-10px">This div is filling in the space as expected.</div>
  </div>
  <!--
      -->
  <div class="width-50">
    <div class="margin-10px padding-10px">This div is filling in the space as expected.</div>
  </div>
  <!--
      -->
  <div class="width-50">
    <div class="margin-10px padding-10px">This div is filling in the space as expected.</div>
  </div>
</div>

这里是链接到我的JSFiddle

Answer 1

您需要使用边界框和钙，因为宽度不包括padding和margin没有它

border-box：width和height属性包括填充和边界，但不是保证金...请注意，填充和边界将在箱子内。并且需要包括保证金，你需要使用width:100%从width:calc(100% - 20px);减去它

* {
  margin: 0px;
}

input {
  display: block;
  background-color: green;
  border: none;
}

div {
  background-color: yellow;
}

.width-100 {
  width: 100%;
  background-color: blue;
}

.wd100{
  width:calc(100% - 20px);
  box-sizing:border-box;
}

.width-50 {
  display: inline-block;
  width: 50%;
  background-color: red;
}

.margin-10px {
  margin: 10px;
}

.padding-10px {
  padding: 10px;
}

<div class="width-100">
  <div class="width-50">
    <input class="margin-10px padding-10px wd100" value="This input should be filling in all the way to the right"/>
  </div><!--
   --><div class="width-50">
    <div class="margin-10px padding-10px wd100">This div is filling in the space as expected.</div>
  </div><!--
  --><div class="width-50">
    <div class="margin-10px padding-10px wd100">This div is filling in the space as expected.</div>
  </div><!--
  --><div class="width-50">
    <div class="margin-10px padding-10px wd100">This div is filling in the space as expected.</div>
  </div>
</div>

Answer 2

你必须设置输入场的width和height。尝试这个：

* {
  margin: 0px;
}
input {
  display: block;
  background-color: green;
  border: none;
}
div {
  background-color: yellow;
}
.width-100 {
  width: 100%;
  background-color: blue;
}
.width-50 {
  display: inline-block;
  width: 50%;
  background-color: red;
}
.margin-10px {
  margin: 10px;
}
.padding-10px {
  padding: 10px;
}

/* added CSS */
input {
  width: 90%;
  height: 18px;
}

<div class="width-100">
  <div class="width-50">
    <input class="margin-10px padding-10px" value="This input should be filling in all the way to the right">
  </div>
  <div class="width-50">
    <div class="margin-10px padding-10px">This div is filling in the space as expected.</div>
  </div>
  <div class="width-50">
    <div class="margin-10px padding-10px">This div is filling in the space as expected.</div>
  </div>
  <div class="width-50">
    <div class="margin-10px padding-10px">This div is filling in the space as expected.</div>
  </div>
</div>

Answer 3

您input不宽100％，它正从浏览器的默认值。

尝试：

input {
 width: 100%;
 ...
}

或者你可以使用自己的类来给它：

* {
  margin: 0px;
  box-sizing: border-box;
}

input {
  width: 100%;
  display: block;
  background-color: green;
  border: none;
}

div {
  background-color: yellow;
}

.width-100 {
  width: 100%;
  background-color: blue;
}

.width-50 {
  display: inline-block;
  width: 50%;
  background-color: red;
}

.margin-10px {
  margin: 10px;
}

.padding-10px {
  padding: 10px;
}

<div class="width-100">
  <div class="width-50 padding-10px">
    <input class="padding-10px" value="This input should be filling in all the way to the right"></input>
  </div><div class="width-50">
    <div class="margin-10px padding-10px">This div is filling in the space as expected.</div>
  </div><div class="width-50">
    <div class="margin-10px padding-10px">This div is filling in the space as expected.</div>
  </div><div class="width-50">
    <div class="margin-10px padding-10px">This div is filling in the space as expected.</div>
  </div>
</div>