0

我有一个表格，我给文本字段一个填充，所以它会更大更好。在表单下方，我有一个提交按钮。按钮和文本字段的宽度为 100%，但问题是，按钮不是完全 100%，因为它与文本字段的宽度不相等。我究竟做错了什么？似乎无法“找到”问题

我把它放在这里http://jsfiddle.net/zrhB6/3/

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，但这不应该是我认为的问题

4

1 回答 1

2

对两个 CSS 选择器，添加：

box-sizing:border-box;

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

于 2013-07-16T13:56:13.717 回答