1

HTML (フォームの一部):

    <div class="container">
        <a id="p1_icon"></a>                                
        <input id="p1" class="input" name="p1" type="password" placeholder="Password">
    </div>

CSS:

.container {
    width:80%;
    margin-left:10%;
    margin-right:10%;  // Almost certainly unnecessary
    position:relative; // To allow the icon to be positioned in the input
}
.input {
    width:100%;
    padding: 10px 15px 10px 30px;  // The icon sits in the 30px padding-left.
    ... other styling
}
#p1_icon {
    @include sprite_index(20px, 20px, -1063px, -246px); // SASS to get the icon from the sprite
    position:absolute;
    top:9px;
    left:7px;              
}

もちろん、問題は、パディング.inputが 100% の幅に追加されるため、最終的にコンテナーよりも広くなることです (したがって、中央に配置されません)。

inputコンテナを完全に満たすにはどうすればよいですか? JavaScript で問題なく実行できますが、モバイル フレンドリーな CSS ソリューションがあれば欲しいです。(注: 自動生成されたエラー メッセージ用のコンテナーが必要です。また、他のものと一致するようにコンテナーの幅を 80% のままにしたいと考えています。)

ありがとう。

4

1 に答える 1

3

入力に追加box-sizing: border-boxします。

http://jsfiddle.net/thirtydot/QAtuX/

.input {
    width: 100%;
    padding: 10px 15px 10px 30px;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
}

詳しくは：

于 2013-08-23T22:53:09.210 に答える