12

「入力」要素を新しい行に配置するにはどうすればよいですか？上記の例では、すべての要素が順番に配置されています。つまり、lable-> input->lable->inputなどです。

/* ----------- My Form ----------- */
.myform{
    margin:0 auto;
    padding:14px;
}
#stylized{
    border-width:1px;
    border-style:solid;
    border-color:#b7ddf2;
    background:#ebf4fb;
}
#stylized h1 {
    font-size:14px;
    font-weight:bold;
    margin-bottom:8px;
    border-width:1px;
    border-style:solid;
    border-color:#b7ddf2;
    padding-bottom:10px;
}
#stylized label{
    display:block;
    font-size:11px;
    font-weight:bold;
    text-align:right;
    float:left;
}
#stylized input{
    float:left;
    font-size:11px;
    padding:4px 2px;
    border:solid 1px #aacfe4;
    width:70px;
    margin:2px 0 20px 10px;
}
/* --------- End of Form --------- */

    <div id="stylized" class="myform">
        <form id="form" name="form" method="post" action="index.html">
        <h1>Data</h1>
        <label>Name: </label>
        <input type="text" name="name" id="name"/>
        <label>Email: </label>
        <input type="text" name="email" id="email"/>
        <label>Password: </label>
        <input type="text" name="password" id="password"/>
        </form>
    </div>
4

7 に答える 7

21 
#stylized input{
    display: block;
    font-size:11px;
    padding:4px 2px;
    border:solid 1px #aacfe4;
    width:70px;
    margin:2px 0 20px 10px;
}

これにより、すべての入力が新しい行に配置されます。-「float：left」を削除し、「display：block」を追加しました。

于 2012-04-27T10:55:06.340 に答える
2

私はそれらをリストタグの下に置きました、そしてそれはスタイルを変えずに働きました、そしてブレークタグの使用は時代遅れです

<ul>
   <li><input type = "text" name = "selection" value = "text1" /> Text1</li>
   <li><input type = "text" name = "selection" value = "text2" /> Text2</li>
</ul>
于 2019-02-23T19:23:01.977 に答える
1

簡単なことを試しましたか

<label>Name: </label><br>
        <input type="text" name="name" id="name"/> 
        <label>Email: </label><br>
        <input type="text" name="email" id="email"/>
于 2012-04-27T10:53:27.663 に答える
1

私の推測では、user1359163の回答が役立つと思いますが、理由を知りたいと思うかもしれません。使用floatすると、ドキュメントの通常のフローから要素が効果的に削除されます。これは、を変更するのと少し似ておりz-index、要素がdivの境界線、ラベル、スパンなどを越えて流れるようにします。 「無視」clearスタイル。

要素は他の要素の上に浮かんでいるかのように動作するため、その点では、浮かない他のすべての要素の左右から離れたままになります。私はCSSの専門家ではありませんが、CSSのこの見方は、、、およびスタイルを使用するときに遭遇したマングルレイアウトの問題を解決するのに大いに役立ちfloatましclearたz-index。

于 2012-04-27T11:01:10.820 に答える
0

これがそのためのJsFiddleです...

編集 ：

#stylized label{
    font-size:11px;
    font-weight:bold;
    text-align:right;
}
#stylized input{
    display:block;
    font-size:11px;
    padding:4px 2px;
    border:solid 1px #aacfe4;
    width:70px;
    margin:2px 0 20px 10px;
}​
于 2012-04-27T10:56:11.060 に答える
0

すべての要素に十分なスペースがあるフローティングレイアウトを選択すると、新しい線が表示されなくなります。

これを試して：

サンプル http://jsfiddle.net/8yZff/

#stylized label{
    font-size:11px;
    font-weight:bold;
    text-align:right;
}
#stylized input{
    font-size:11px;
    padding:4px 2px;
    border:solid 1px #aacfe4;
    width:70px;
    margin:2px 0 20px 10px;
    display: block;
}
于 2012-04-27T10:56:58.343 に答える
0

ラベル/フィールドのペアの配列などの表形式のデータの場合は、を使用しtableます。スタイリングがはるかに簡単になり、スタイリングされていない外観がはるかに良くなります。

于 2012-04-27T14:17:42.913 に答える