Question

我有一个表单，我给textfields一个填充，所以它会更大更好。在表单下面，我有一个提交按钮。按钮和文本字段的宽度为100％，但问题是，按钮不完全100％，即使在文本字段的宽度上也不均匀。我究竟做错了什么？似乎无法“找到”问题

Css

input[type=text],input[type=password]{
  display: block;
  height: 3em;  
  width: 100%;

}

.btn {
  background-color:#c1d82f;
  border:3px solid #97a34b;
  display:inline-block;
  color:#26328c;
  font-family:Verdana;
  font-size:20px;
  font-weight:bold;
  padding:6px 24px;
  text-decoration:none;
  cursor: pointer;
  width: 100%;
}

HTML

<div class="grid-container">    
    <div class="grid-50 login">

        <h3>Login</h3>
        <form class="grid-100">
            <input type="text" name="loginEmail" placeholder="Email"/>             
            <input type="password" name="loginPassword" placeholder="pass"/>
            <input type="submit" name="loginSubmit" class="btn"/>
    </div>



    <div class="grid-50 login">
        <h3>Register</h3>

        <form">
            <input type="text" name="registerName" placeholder="Name"/>
            <input type="text" name="registerEmail" placeholder="Email"/>
            <input type="password" name="registerPassword" placeholder="pass"/>
            <input type="submit" name="registerSubmit" class="btn"/>    
   </div>

</div>

我正在使用unSemantic grid，但这不应该是我认为的问题

Answer 1

对两个CSS选择器添加：

box-sizing:border-box;

原因是默认的框大小调整不包括宽度中的填充和边距，因此您获得了总宽度的100％+填充+边框+边距。

将提交按钮和文本字段与css对齐

1 个答案: