239

パディングが挿入された 2 つの入力フィールドで構成されるログイン フォームを作成しようとしていますが、これらの 2 つのフィールドは常に親の境界を超えてしまいます。この問題は、追加された挿入パディングに起因します。この問題を修正するために何ができるでしょうか?

JSFiddle スニペット: http://jsfiddle.net/4x2KP/

注意: コードは完全ではないかもしれません。たとえば、テキスト入力をカプセル化する span 要素はまったく必要ない場合があります。

    #mainContainer {
    	line-height: 20px;
    	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        background-color: rgba(0,50,94,0.2);
    	margin: 20px auto;
    	display: table;
    	-moz-border-radius: 15px;
    	border-style: solid;
    	border-color: rgb(40, 40, 40);
    	border-radius: 2px 5px 2px 5px / 5px 2px 5px 2px;
    	border-radius: 2px;
    	border-radius: 2px 5px / 5px;
    	box-shadow: 0 5px 10px 5px rgba(0,0,0,0.2);
    }
    
    .loginForm {
    	width: 320px;
    	height: 250px;
    	padding: 10px 15px 25px 15px;
    	overflow: hidden;
    }
    
    .login-fields > .login-bottom input#login-button_normal {
    	float: right;
    	padding: 2px 25px;
    	cursor: pointer;
    	margin-left: 10px;
    }
    
    .login-fields > .login-bottom input#login-remember {
    	float: left;
    	margin-right: 3px;
    }
    
    .spacer {
    	padding-bottom: 10px;
    }
    
    /* ELEMENT OF INTEREST HERE! */
    input[type=text],
    input[type=password] {
        width: 100%;
    	height: 20px;
    	padding: 5px 10px;
    	background-color: rgb(215, 215, 215);
        line-height: 20px;
        font-size: 12px;
        color: rgb(136, 136, 136);
        border-radius: 2px 2px 2px 2px;
        border: 1px solid rgb(114, 114, 114);
    	box-shadow: 0 1px 0 rgba(24, 24, 24,0.1);
    }
    
    input[type=text]:hover,
    input[type=password]:hover,
    label:hover ~ input[type=text],
    label:hover ~ input[type=password] {
     	background:rgb(242, 242, 242) !important;
    }
    
    input[type=submit]:hover {
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.3),
        inset 0 -10px 10px rgba(255,255,255,0.1);
    }
    <div id="mainContainer">
        <div id="login" class="loginForm">
            <div class="login-top">
            </div>
            <form class="login-fields" onsubmit="alert('test'); return false;">
                <div id="login-email" class="login-field">
                    <label for="email" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">E-mail address</label>
                    <span><input name="email" id="email" type="text"></input></span>
                </div>
                <div class="spacer"></div>
                <div id="login-password" class="login-field">
                    <label for="password" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Password</label>
                    <span><input name="password" id="password" type="password"></input></span>
                </div>
                <div class="login-bottom">
                    <input type="checkbox" name="remember" id="login-remember"></input>
                    <label for="login-remember" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Remember my email</label>
                    <input type="submit" name="login-button" id="login-button_normal" style="cursor: pointer" value="Log in"></input>
                </div>
            </form>
        </div>
    </div>

4

10 に答える 10

23

上記のすべてが失敗した場合は、入力に次のプロパティを設定して、最大スペースを取り、オーバーフローしないようにしてください。

input {
    min-width: 100%;
    max-width: 100%;
}
于 2015-12-08T20:19:50.800 に答える
3

全体の幅にパディングが追加されます。コンテナーにはピクセル幅があるため、入力にもピクセル幅を指定することをお勧めしますが、同じ問題を回避するために、設定した幅からパディングと境界線を削除することを忘れないでください。

于 2013-06-03T23:44:15.980 に答える
0

これらの解決策を試しましたが、決定的な結果は得られませんでした。最後に、フィールドセットで適切なセマンティック マークアップを使用しました。幅の計算とボックスのサイズ変更を追加する必要がなくなりました。

また、必要に応じてフォームの幅を設定することもでき、入力は端に必要なパディング内にとどまります。

この例では、フォームとフィールドセットに境界線を配置し、凡例とフィールドセットに不透明な背景を配置して、それらがどのように重なり合って配置されているかを確認できるようにしています。

<html>
  <head>
  <style>
    form {
      width: 300px;
      margin: 0 auto;
      border: 1px solid;
    }
    fieldset {
      border: 0;
      margin: 0;
      padding: 0 20px 10px;
      border: 1px solid blue;
      background: rgba(0,0,0,.2);
    }
    legend {
      background: rgba(0,0,0,.2);
      width: 100%;
      margin: 0 -20px;
      padding: 2px 20px;
      color: $col1;
      border: 0;
    }
    input[type="email"],
    input[type="password"],
    button {
      width: 100%;
      margin: 0 0 10px;
      padding: 0 10px;
    }
    input[type="email"],
    input[type="password"] {
      line-height: 22px;
      font-size: 16px;
    }
    button {
    line-height: 26px;
    font-size: 20px;
    }
  </style>
  </head>
  <body>
  <form>
      <fieldset>
          <legend>Log in</legend>
          <p>You may need some content here, a message?</p>
          <input type="email" id="email" name="email" placeholder="Email" value=""/>
          <input type="password" id="password" name="password" placeholder="password" value=""/>
          <button type="submit">Login</button>
      </fieldset>
  </form>
  </body>
</html>
于 2016-07-06T12:00:28.017 に答える
-1

パディングは基本的に幅に追加されるため、実際には 100% 幅に 20px を追加していますwidth:100%。padding: 5px 10px

于 2013-06-03T23:42:28.490 に答える
-2

入力フィールドを中央揃えにしますか? 要素を中央に配置するコツ: 要素の幅を指定し、余白を自動に設定します。例:

margin : 0px auto;
width:300px

更新されたフィドルへのリンク:

http://jsfiddle.net/4x2KP/5/

于 2013-06-03T23:43:09.747 に答える