html - div 内 100% 宽度的输入与 div 重叠

Question

我在宽度为 100% 的输入中遇到边距问题，因为它与 div 容器重叠。

我在论坛上寻找解决方案，可能的解决方案是应用 box-sizing: border-box，但它不起作用。

解决方案对我不起作用:CSS - Input at 100% width overlaps div

jsfiddle: https://jsfiddle.net/igorac1999/fuovpkba/

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*, *::before, *::after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

body, pre {
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

.container_calculator {
  width: 100%;
  max-width: 400px;
  background-color: tomato;
  border-radius: 5px;
  margin: 5px auto;
}

.container_calculator > label {
  display: inline-block;
  color: #fff;
  margin: 10px 0 0 20px;
}

.container_calculator > input {
  height: 20px;
  border: 1px solid tomato;
  border-radius: 5px;
  width: 100%;
  margin: 5px 20px;
}


div.result_bin2dec {
  border: 1px solid #edf2f7;
  background-color: #edf2f7;
  border-radius: 10px;
  margin-top: 30px;
  height: 35px;
}

    <div class="container">
        <div class="container_calculator">
            <label>Number</label>
            <input type="text" id="number">
        </div>

        <div class="result_bin2dec">
            <pre>
                Dec: 10
                Bin: 01
            </pre>
        </div>
    </div>

enter image description here

Answer 1

相反 margin关于 child ，你可以使用 padding在 parent 上，因此它可以包含在 box-sizing 中

正如您所说的链接答案中所指定的那样对您不起作用，请参阅下面的 box-sizing 规范链接以了解它是如何工作的以及如何使用它

可能的例子:https://jsfiddle.net/gr7cbevj/

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

body,
pre {
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

.container_calculator {
  width: 100%;
  max-width: 400px;
  background-color: tomato;
  border-radius: 5px;
  margin: 5px auto;
  padding: 0 20px;/* added */
  box-sizing: border-box;/* added */
}

.container_calculator>label {
  display: inline-block;
  color: #fff;
  margin: 10px 0 0 0px;/* modified */
}

.container_calculator>input {
  height: 20px;
  border: 1px solid tomato;
  border-radius: 5px;
  width: 100%;
  margin: 5px 0px;/* modified */
}

div.result_bin2dec {
  border: 1px solid #edf2f7;
  background-color: #edf2f7;
  border-radius: 10px;
  margin-top: 30px;
  height: 35px;
}

<div class="container">
  <div class="container_calculator">
    <label>Number</label>
    <input type="text" id="number">
  </div>

  <div class="result_bin2dec">
    <pre>
                Dec: 10
                Bin: 01
            </pre>
  </div>
</div>

see the use of box-sizing .

The box-sizing CSS property sets how the total width and height of an element is calculated.