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，您可以在父母上使用padding，因此可以将其包含在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>

请参阅box-sizing的使用。

box-sizing CSS属性设置如何计算元素的总宽度和高度。

Answer 2

您要向边距添加20px。

更改此元素的CSS：

上一个：

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

新：

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

Answer 3

只需将padding插入父级并删除输入和标签中的margin。

.container_calculator {

   padding: 5px 20px;<-------------insert this line

   //Other codes...

}

.container_calculator > input {

  margin: 5px 20px;<--------------remove this

  //Other codes...

}

.container_calculator>label {

 margin: 10px 0 0 20px;<---------remove this

 //Other codes...

}

对于input和label之间的空格，可以使用：

.container_calculator>input{

    margin-top:5px;

   //Other codes...

}

  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: 5px 20px;
        }
        
        .container_calculator>label {
            display: inline-block;
            color: #fff;
        }
        
        .container_calculator>input {
            height: 20px;
            border: 1px solid tomato;
            border-radius: 5px;
            width: 100%;
        }
        
        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 4

您可以将宽度设置为：

width: calc(100%-20px)

如果您将左右边距设置为10px

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

4 个答案: