我在寬度為 100% 的輸入中遇到邊距問題，因為它與 div 容器重疊。我在論壇上尋找解決方案，可能的解決方案是應(yīng)用 box-sizing: border-box，但它不起作用。解決方案對我不起作用：CSS - 輸入 100% 寬度重疊 divjsfiddle: 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>
3 回答
瀟湘沐
TA貢獻1816條經(jīng)驗 獲得超6個贊
相反margin，您可以在parent上使用children padding，這樣它就可以包含在box-sizing
正如您所說的鏈接答案中指定的不適合您，請參閱下面的盒子大小規(guī)范鏈接以了解它的工作原理以及如何使用它
可能的示例： 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的使用。
CSSbox-sizing屬性設(shè)置如何計算元素的總寬度和高度。
鴻蒙傳說
TA貢獻1865條經(jīng)驗 獲得超7個贊
只需插入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>
胡說叔叔
TA貢獻1804條經(jīng)驗 獲得超8個贊
您正在向邊距添加 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;
}
- 3 回答
- 0 關(guān)注
- 174 瀏覽
添加回答
舉報
0/150
提交
取消