gpt4 book ai didi

css - 为什么输入字段比它的父 div 宽?

转载 作者:太空宇宙 更新时间:2023-11-04 06:34:41 27 4
gpt4 key购买 nike

为什么表单输入字段比其父 div 宽?宽度应用于文本 div,但不应用于其中包含表单字段的 div。为什么会这样?

See the livecode here.

.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% 并将框大小设置为 border-box 以确保填充和边框在 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>

关于css - 为什么输入字段比它的父 div 宽?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54336872/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com