- 此问题在此处已有答案**:
Why percentage value within grid-gap create overflow in CSS grid?(1个答案)
昨天关门了。
我想创建一个包含表单的div容器,但是我在容器div之外提交输入
.container {
margin: auto;
width: 20%;
padding: 10px;
border: 1px solid #E1291B;
display: grid;
background-color: bisque;
}
.form-login {
display: grid;
grid-template-columns: 1fr;
gap: 10%;
}
<div class="container">
<div class="title">
<h4>Connectez vous</h4>
</div>
<form class="form-login" action="">
<label for="email">E-mail</label>
<input type="email" name="email" id="">
<label for="pass">Mot de passe </label>
<input type="password" name="pass" id="">
<input type="submit" value="Login">
</form>
</div>
2条答案
按热度按时间yqkkidmi1#
我认为您应该在. container div中添加
min-width
,以防止它变得太窄:你也可以把
width: 96%
(例如)放在输入中,让它们根据div大小增长:92vpleto2#
把
min-height
赋给.form-login
类。你也可以用.container
width:max-width
代替width。容器将根据它里面内容的宽度来占用宽度。