1

アカウントページのレイアウトをしています。また、テーブルの使用を避けようとしているため、コードがひどく見えると思います。ここに私が取得したいもののスクリーンショットがあります: ここに画像の説明を入力

現在、私は次のようなものを使用しています (jsfiddle を参照): http://jsfiddle.net/uaUtq/7/

ここに簡単なレビューがあります：

<ul class="info_list">
    <li>
        <label>First name</label>
        <div><input type="text" /></div>
    </li>
    <li>
        <label>Email</label>
        <div>
            <p>john@gmail.com (Default)</p>
            <input type="text"/></div>
    </li>
    <li>
        <label></label>
        <div>
            <input type="checkbox" />Tickbox
        </div>
    </li>
</ul>​

それは醜く複雑に感じます。どのような方法でそれを行うことをお勧めしますか?

ありがとう

4

4 に答える 4

3

あなたがしていることに順不同のリストを使用することに何の問題もありません。考えられる他のオプションは、フォームを使用するだけで、ラベルと入力のペアをレイアウト目的で div でラップするだけです。

<form>
  <div>
    <label for="firstName">First Name</label>
    <input type="text" id="firstName" />
  </div>
  <div>
    <label for="email">Email</label>
    <input type="text" id="email" />
  </div>
// etc.
</form>
于 2012-04-06T04:12:03.250 に答える
2

あまりにも多くのタグを台無しにしないでください。

スタイリング部分はそのまま使ってCSS<div>...</div>に任せる

（とにかく、それが本来の目的です。「コンテンツ」を「デザイン」から分離することです） ...

于 2012-04-06T04:15:11.013 に答える
0

このように li の代わりに div を使用する必要があると思います

<div>
    <div class="label">First Name</div>
    <div class="element"><input type="text"/></div>
</div>
<div>
    <div class="label">Email</div>
    <div class="element"><input type="text"/></div>
</div>

ラベルとコントロールの CSS クラスを適切な位置合わせ (マージン、パディング、フロートなど) に記述します。

于 2012-04-06T04:15:53.697 に答える
-1

テーブルを使用する必要があります。表は、最初の列が必要な幅 (最も長いラベルの幅) だけを占めるように列を整列させる唯一の方法です。他のアプローチでは、幅を推測する必要があり、結果は必然的に異なり、コードは堅牢ではありません (最長のラベルの長さが変わるたびに幅を調整する必要があります)。

(これは繰り返される質問であり、StackOverflow でさまざまな回答を含む多くのバージョンを見つけることができます。事実に裏付けられていないイデオロギーの議論を聞くのをやめると、問題は非常に単純になります。)

于 2012-04-06T05:27:53.483 に答える