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 に答える