Question

我试图深入理解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/

Answer 1

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

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

希望这个帮助

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

1 个答案: