为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

慕桂英546537 2024-01-11 14:14:06
我在宽度为 100% 的输入中遇到边距问题,因为它与 div 容器重叠。我在论坛上寻找解决方案,可能的解决方案是应用 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条经验 获得超6个赞

相反margin,您可以在parent上使用children padding,这样它就可以包含在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的使用。

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


查看完整回答
反对 回复 2024-01-11
?
鸿蒙传说

TA贡献1865条经验 获得超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>


查看完整回答
反对 回复 2024-01-11
?
胡说叔叔

TA贡献1804条经验 获得超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;

}


查看完整回答
反对 回复 2024-01-11
  • 3 回答
  • 0 关注
  • 109 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信