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

我想深入了解HTML/CSS行为，在以下示例中，出生日期输入宽度比其他输入短。当我将它的宽度设置为100％时，它会超出父div的边界。我在做什么错？html输入的宽度不是从父类继承的

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/

来源

2017-10-28 Alex Lavriv

您必须添加样式规则让您在放在一边。请使用下面的代码作为参考。

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

希望这有助于

来源

2017-10-28 11:43:41

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

回答

相关问题