gpt4 book ai didi

html - html 输入的宽度不是从父级继承的

转载 作者:行者123 更新时间:2023-11-28 02:44:39 25 4
gpt4 key购买 nike

我试图深入理解 HTML/CSS 行为,在下面的示例中,出生日期输入宽度比其他输入宽度短。当我将其宽度设置为 100% 时,它超出了父 div 的边界。我做错了什么?

HTML:

<body>  
<div class="form">
<input type="text" placeholder="Last Name">
<input type="text" placeholder="First Name">
<input type="text" placeholder="Country">
<div>
<input type="text" id="birthDate" placeholder="Birth Date">
<span class="dateFormat">YYYY-MM-DD</span>
</div>
</div>
</body>

CSS:

.form input {
margin:5px;
height: 30px;
padding: 5px;
}
.form {
display: grid;
margin: auto;
width: 50%;
grid-template-columns: 1fr 1fr;
}

JSFIDDLE:
https://jsfiddle.net/AlexLavriv/oxmq71sn/

最佳答案

您还必须为您的输入添加样式规则。请使用以下代码作为引用。

.form input {
margin:5px;
height: 30px;
padding: 5px;
}
.form {
display: grid;
margin: auto;
width: 50%;
grid-template-columns: 1fr 1fr;
}

input[type=text]{
width: 100%;
}
<body>  
<div class="form">
<input type="text" placeholder="Last Name">
<input type="text" placeholder="First Name">
<input type="text" placeholder="Country">
<div>
<input type="text" id="birthDate" placeholder="Birth Date">
<span class="dateFormat">YYYY-MM-DD</span>
</div>
</div>
</body>

希望对你有帮助

关于html - html 输入的宽度不是从父级继承的,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46989294/

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