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

Question

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

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

解决方案对我不起作用：CSS - 输入 100% 宽度重叠 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>

Answer 1

相反margin，您可以在parent上使用children&nbsp;padding，这样它就可以包含在box-sizing正如您所说的链接答案中指定的不适合您，请参阅下面的盒子大小规范链接以了解它的工作原理以及如何使用它可能的示例： https:&nbsp;//jsfiddle.net/gr7cbevj/html {&nbsp; -webkit-box-sizing: border-box;&nbsp; -moz-box-sizing: border-box;&nbsp; box-sizing: border-box;}*,*::before,*::after {&nbsp; -webkit-box-sizing: inherit;&nbsp; -moz-box-sizing: inherit;&nbsp; box-sizing: inherit;}body,pre {&nbsp; margin: 0;&nbsp; padding: 0;}.container {&nbsp; width: 100%;&nbsp; max-width: 980px;&nbsp; margin: 0 auto;}.container_calculator {&nbsp; width: 100%;&nbsp; max-width: 400px;&nbsp; background-color: tomato;&nbsp; border-radius: 5px;&nbsp; margin: 5px auto;&nbsp; padding: 0 20px;/* added */&nbsp; box-sizing: border-box;/* added */}.container_calculator>label {&nbsp; display: inline-block;&nbsp; color: #fff;&nbsp; margin: 10px 0 0 0px;/* modified */}.container_calculator>input {&nbsp; height: 20px;&nbsp; border: 1px solid tomato;&nbsp; border-radius: 5px;&nbsp; width: 100%;&nbsp; margin: 5px 0px;/* modified */}div.result_bin2dec {&nbsp; border: 1px solid #edf2f7;&nbsp; background-color: #edf2f7;&nbsp; border-radius: 10px;&nbsp; margin-top: 30px;&nbsp; height: 35px;}<div class="container">&nbsp; <div class="container_calculator">&nbsp; &nbsp; <label>Number</label>&nbsp; &nbsp; <input type="text" id="number">&nbsp; </div>&nbsp; <div class="result_bin2dec">&nbsp; &nbsp; <pre>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Dec: 10&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Bin: 01&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </pre>&nbsp; </div></div>请参阅box-sizing的使用。CSSbox-sizing属性设置如何计算元素的总宽度和高度。

Answer 2

只需插入padding到父级并margin在输入和标签中删除即可。.container_calculator {&nbsp; &nbsp;padding: 5px 20px;<-------------insert this line&nbsp; &nbsp;//Other codes...}.container_calculator > input {&nbsp; margin: 5px 20px;<--------------remove this&nbsp; //Other codes...}.container_calculator>label {&nbsp;margin: 10px 0 0 20px;<---------remove this&nbsp;//Other codes...}对于input和之间的空格label，您可以使用：.container_calculator>input{&nbsp; &nbsp; margin-top:5px;&nbsp; &nbsp;//Other codes...}&nbsp; html {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -webkit-box-sizing: border-box;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -moz-box-sizing: border-box;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; *,&nbsp; &nbsp; &nbsp; &nbsp; *::before,&nbsp; &nbsp; &nbsp; &nbsp; *::after {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -webkit-box-sizing: inherit;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -moz-box-sizing: inherit;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; box-sizing: inherit;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; body,&nbsp; &nbsp; &nbsp; &nbsp; pre {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 0;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; .container {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; max-width: 980px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0 auto;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; .container_calculator {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; max-width: 400px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: tomato;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 5px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 5px auto;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 5px 20px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; .container_calculator>label {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: #fff;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; .container_calculator>input {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 20px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: 1px solid tomato;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 5px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; div.result_bin2dec {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: 1px solid #edf2f7;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #edf2f7;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-top: 30px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 35px;&nbsp; &nbsp; &nbsp; &nbsp; }<div class="container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="container_calculator">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label>Number</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" id="number">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="result_bin2dec">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <pre>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Dec: 10&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Bin: 01&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </pre>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>

Answer 3

您正在向边距添加 20px。更改此元素的 css：以前的：.container_calculator > input {&nbsp; height: 20px;&nbsp; border: 1px solid tomato;&nbsp; border-radius: 5px;&nbsp; width: 100%;&nbsp; margin: 5px 20px;}新的：.container_calculator input {&nbsp; height: 20px;&nbsp; border: 1px solid tomato;&nbsp; border-radius: 5px;&nbsp; width: 100%;&nbsp; margin: 5px 0px;}