4

これは私がいつも抱えている問題です。

次の HTML:

<form id="sy_login">
    <ul class="form_column">
        <li>    
            <input id="sy_login_username" name="sy_login_username" placeholder="Username"></input>
        </li>
        <li>
            <input id="sy_login_passowrd" name="sy_login_password" placeholder="Password"></input>
        </li>
    </ul>
</form>

次の CSS が続きます。

@CHARSET "ISO-8859-1";

body {
    background: #DDDDDD;
    padding:0px;
    margin:0px;
}

input[placeholder], [placeholder], *[placeholder] {
    font-style:italic;
}

.form_column {
    list-style-type: none;
    padding: 0px;
    margin: 10px 10px 10px 10px;
    width:100%;
}

.form_column input, .form_column textarea, .form_column select {
    width: 100%;
}

次の結果が得られます。

ここに画像の説明を入力

これは、入力フィールドの 1 つの Firebug 検査です。

ここに画像の説明を入力

私が知る限り、マージンのためにul親から切り取られています。form

ここに画像の説明を入力

ul100% の幅を持ちながらマージンで構成され、幅も 100% である必要がありinputsます。

アップデート:

マージンをパディングに置き換えようとしましたが、それは同じ意図された望ましい効果をもたらしましたが、まったく同じように見えました. 入力自体に静的な幅を使用しなければならないケースを避けたいと思っています。

回答に役立つかもしれないもう 1 つの注意点は、これは HTML5 でのみ機能する必要があるということです。クロススタンダード ソリューションは適切ですが、技術的には必要ありません。

幅除去後:100%

ここに画像の説明を入力

今ではずっと良くなっています。ただし、入力の問題を強調しました。入力にはテキストのパディングが必要ですが、幅はul親フォームに対して動的である必要があり、ウィンドウ自体に対して動的な幅が必要です。

4

5 に答える 5

2

UL のマージンを取り除いてください。FORM にパディングを与えます。(これにより、ul に自動マージンが与えられます)。

また、任意の要素の幅を 100% に設定すると、その親要素の幅全体が使用されることを覚えておいてください。この要素にマージンまたはパディングを追加すると、親要素の幅全体を超えてしまい、UI が壊れる可能性があります。

つまり、Margin(=10px)+Width(=100%) > 親要素の幅です。

CSS ボックス モデルのアイデアを得るには、このリンクにアクセスしてください。

http://www.addedbytes.com/articles/for-beginners/the-box-model-for-beginners/

ありがとうございました。

于 2012-11-04T17:32:19.143 に答える
1

別のフル バージョンを見てみましょう。赤い枠はフォームに属し、青い枠は UL に属します。必要に応じて削除します。

body {
    background: #DDDDDD;
    padding:0px;
    margin:0px;
}

input[placeholder], [placeholder], *[placeholder] {
    font-style:italic;
}
#sy_login{
    border:solid 1px red;
}
.form_column {   
    border:solid 1px blue;
    margin: 0px;
    padding:5px;

}
.form_column ul,li{
    list-style-type: none;
    margin:0px;
    padding:0px;
    width:auto;
}
.form_column input, .form_column textarea, .form_column select {
    width:100%;
}
于 2012-11-04T17:46:19.863 に答える
0 
.form_column {
    list-style-type: none;
    padding: 0px;
    margin:10px;    
}
于 2012-11-04T17:36:24.220 に答える
0

次のようなことを試してください：

.form_column {
    list-style-type: none;
    padding: 10px;
    margin: 0;
    width:100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
于 2012-11-04T17:36:52.130 に答える
0

コメントwidth:100%してみるform_column

.form_column {
    list-style-type: none;
    padding: 0px;
    margin: 10px 10px 10px 10px;
    'width:100%;
}

ライブデモを参照

于 2012-11-04T17:16:36.623 に答える