この気の利いたサイトから変更したコードを次に示します。
チェックボックスの画像、フォント、色などでスタイル設定されたすべての要素があります。
レイアウトの仕方がわかりません。私には戦略がありません。しかし、私が欲しいのはフィドルとは少し違うだけです。
タイトルとコンテンツ テキストをそのまま配置したいのですが、タイトルがチェック ボックスと同じ高さになるチェック ボックスの右側に配置しました。これは最も理にかなっていて、最も読みやすいでしょう。
どうすればこれを行うことができますか?
この気の利いたサイトから変更したコードを次に示します。
チェックボックスの画像、フォント、色などでスタイル設定されたすべての要素があります。
レイアウトの仕方がわかりません。私には戦略がありません。しかし、私が欲しいのはフィドルとは少し違うだけです。
タイトルとコンテンツ テキストをそのまま配置したいのですが、タイトルがチェック ボックスと同じ高さになるチェック ボックスの右側に配置しました。これは最も理にかなっていて、最も読みやすいでしょう。
どうすればこれを行うことができますか?
私はあなたのフィドルを実際の例で更新しました
これがあなたが探しているもののようです。1 行目は、チェックボックスの横にヘッダーがあり、その下に説明があります。
他の 2 つは、チェックボックスの横にあるすべてのテキストです。他のすべてを行 1 の例として使用する場合は、<div style="clear: both"></div>
1 行を上に移動します。
説明テキストをヘッダー テキストと揃える場合。要素で使用margin-left
して<p>
整列させるか、すべてを<table>
.
ここに私のバージョンがあります: 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 を使用して間隔を少し調整できます。