0

2 つの Div がフォームに入る

次のようになります。

<form>
    <div id="top">
        <label>Gimme a Number:<input type="number" /></label><br />
        <label>Gimme a Word:<input type="textarea" /></label><br />
        <label>Now tell me how you feel about HTML forms: <textarea rows="4" cols="50"></textarea></label><br />
    </div>
    <div id="bottom">
        <label>Gimme a Number:<input type="number" /></label><br />
        <label>Gimme a Word:<input type="textarea" /></label><br />
        <label>Now tell me how you feel about HTML forms: <textarea rows="4" cols="50"></textarea></label><br />
    </div>
</form>

absoluteすべてのフォーム フィールドを配置するいくつかの CSS がありleft、プリンシパルのフィドルはこちらです (ステップ 1)

そこで、改行を追加して最初の問題を修正しました(ステップ 2 のフィドル)。

これは、2 つの理由から理想的なソリューションではありません。1 つは DOM の余分な要素です。底にtextareaスチルが溢れ出すdiv。

私が試したさまざまなclearfixの回答が（主に他のSOの質問から）機能しなかったときに、次を挿入して一時的なハックを見つけました：

<hr class="clearfix" /><br />

2 つの間に挿入hr visibility:hiddenし、CSS で を指定します。

これで私のページでは機能しましたが、ここ (ステップ 3)でわかるように、実際には機能しません。私のページのフォームでは、divの背景が透明で、ユーザーが満足できるように十分に離れています。これはイントラネット注文フォーム (電話からも使用されます) であり、SV スタートアップ Web アプリケーションではないため、私は今のところ本番環境のままにしておいてよかったのですが、結局、これを行う正しい方法は何でしたか?

div.topを含む完全なコンテンツを含めるにはどうすればよいtextareaですか? を使用して要素に対して多くの「移動」ソリューションを試しましたfloatが、予想どおり、 が編集されていないため機能しませtextareaんfloat。

理想的には、余分な<br>sを捨てて、<div>すべての要素を手動で配置したり、ページに複雑さを追加したりすることなく、 s に実際にコンテンツを含めるようにしたいと考えています。どんなアイデアでも大歓迎です。

4

1 に答える 1

0

あなたが探しているもののための良いトリックは、Html Description Listを使用することです。

たとえば、次のように記述できます。

<dl id="top">
    <dt>Gimme a Number:</dt>
    <dd><input type="number" /></dd>
    <dt>Gimme a Word:</dt>
    <dd><input type="textarea" /></dd>
    <dt>Now tell me how you feel about HTML forms:</dt>
    <dd><textarea rows="4" cols="50"></textarea></dd>
</dl>
<dl id="bottom">
    <dt>Gimme a Number:</dt>
    <dd><input type="number" /></dd>
    <dt>Gimme a Word:</dt>
    <dd><input type="textarea" /></dd>
    <dt>Now tell me how you feel about HTML forms:</dt>
    <dd><textarea rows="4" cols="50"></textarea></dd>
</dl>

jsfiddle

そして、これはあなたのフィドルのように見えるようにするためのもう少しのcssです:

#top{
    color:white;
    font-weight:700;
    background-color:blue;
}
#bottom{
    font-weight:700;
    background-color:red;
}

dl {
    padding: 0.5em;
    height: 100%;
    display: table;
}

dt {
    float: left;
    clear: left;
}

dd {
    float: right;
    clear: right;
}

フィドル

編集

不要なラベルの問題については、"for" 属性を使用する簡単な解決策があります。次に例を示します。

<dt><label for="number1">Gimme a Number:</label></dt>
<dd><input id="number1" type="number" /></dd>

更新されたフィドル

ラベルの本来の用途:

<label>Gimme a Number:<input type="number" /></label><br />

は 2 つのタグを結合するため、使用しないでください。さらにセマンティクスについて言えば、入力は本当にラベルの一部であるべきでしょうか?

dd / dt の非セマンティックな使用に関するコメントを考慮すると、この fiddleのように dt と dd を簡単に交換できます。更新された例は次のとおりです。

<dd><label for="number1">Gimme a Number:</label></dd>
<dt><input id="number1" type="number" /></dt>

これで、CSS がデザインの選択を処理するセマンティック HTML ができました。

編集 2

新しいフィドルheight: 100%;- DLは必要ありません

于 2013-10-25T17:37:27.807 に答える