0

この気の利いたサイトから変更したコードを次に示します。

http://jsfiddle.net/Ajhka/

チェックボックスの画像、フォント、色などでスタイル設定されたすべての要素があります。

レイアウトの仕方がわかりません。私には戦略がありません。しかし、私が欲しいのはフィドルとは少し違うだけです。

タイトルとコンテンツ テキストをそのまま配置したいのですが、タイトルがチェック ボックスと同じ高さになるチェック ボックスの右側に配置しました。これは最も理にかなっていて、最も読みやすいでしょう。

どうすればこれを行うことができますか？

4

2 に答える 2

1

私はあなたのフィドルを実際の例で更新しました

http://jsfiddle.net/Ajhka/2/

これがあなたが探しているもののようです。1 行目は、チェックボックスの横にヘッダーがあり、その下に説明があります。

他の 2 つは、チェックボックスの横にあるすべてのテキストです。他のすべてを行 1 の例として使用する場合は、<div style="clear: both"></div>1 行を上に移動します。

説明テキストをヘッダー テキストと揃える場合。要素で使用margin-leftして<p>整列させるか、すべてを<table>.

于 2012-05-18T20:37:30.487 に答える
1

ここに私のバージョンがあります: http://jsfiddle.net/Ajhka/5/

CSS はまったく変更していません。HTML だけです。

<form id="privacy">
    <div>
        <input type="radio" id="radio1" name="rdo">
        <label for="radio1"></label>
        <span class="privacy_title">Normal</span>
        <span class="privacy_content">When you add a bookmarks it is posted to the feed.  You have a public page which can be viewed by non-members.</span>
    </div>
    <div>
        <input type="radio" id="radio2" name="rdo">
        <label for="radio2"></label>
        <span class="privacy_title">Private</span>
        <span class="privacy_content">The bookmarks you add are not posted to the feed.  You do not have a public page.</span>
    </div>
    <div>
        <input type="radio" id="radio3" name="rdo">
        <label for="radio3"></label>
        <span class="privacy_title">Secret</span>
        <span class="privacy_content">Same as private and all of your data is encrypted using NSA approved algorithms.</span>
    </div>
</form>

このレイアウトを取得するために、<p>タグをに交換しました<span>。次に、ラジオ/タイトル/テキストの各セットを<div>. 必要に応じて、CSS を使用して間隔を少し調整できます。

于 2012-05-18T20:45:59.327 に答える