为什么输入字段比它的父字段 div 宽?
Why are input fields wider than it's parent div?
为什么表单输入字段比其父字段宽 div?宽度应用于文本 div 但不应用于其中包含表单字段的 div。为什么会这样?
.parent {
width: 400px;
background-color: yellow;
}
.left {
display: inline-block;
width: 50%;
background-color: red
}
.right {
display: inline-block;
width: 30%;
background-color: blue
}
<div class="parent">
<div class="left">This is text</div>
<div class="right"><input type="text"></div>
<div class="left">This is text</div>
<div class="right">text</div>
</div>
确保将输入字段的最大宽度设置为 100%,并将框大小设置为边框框,以确保填充和边框在 100% 范围内:
input {
max-width: 100%;
box-sizing: border-box;
}
.parent {
width: 400px;
background-color: yellow;
}
.left {
display: inline-block;
width: 50%;
background-color: red
}
.right {
display: inline-block;
width: 30%;
background-color: blue
}
<div class="parent">
<div class="left">This is text</div>
<div class="right"><input type="text"></div>
<div class="left">This is text</div>
<div class="right">text</div>
</div>
为什么表单输入字段比其父字段宽 div?宽度应用于文本 div 但不应用于其中包含表单字段的 div。为什么会这样?
.parent {
width: 400px;
background-color: yellow;
}
.left {
display: inline-block;
width: 50%;
background-color: red
}
.right {
display: inline-block;
width: 30%;
background-color: blue
}
<div class="parent">
<div class="left">This is text</div>
<div class="right"><input type="text"></div>
<div class="left">This is text</div>
<div class="right">text</div>
</div>
确保将输入字段的最大宽度设置为 100%,并将框大小设置为边框框,以确保填充和边框在 100% 范围内:
input {
max-width: 100%;
box-sizing: border-box;
}
.parent {
width: 400px;
background-color: yellow;
}
.left {
display: inline-block;
width: 50%;
background-color: red
}
.right {
display: inline-block;
width: 30%;
background-color: blue
}
<div class="parent">
<div class="left">This is text</div>
<div class="right"><input type="text"></div>
<div class="left">This is text</div>
<div class="right">text</div>
</div>