html - 创建单选按钮框的策略：

Question

这是我从这个漂亮的网站修改的一些代码：

http://jsfiddle.net/Ajhka/

我的所有元素都用复选框图像、..字体、颜色等设置样式。

我只是不知道如何进行布局。我没有策略。但我想要的只是与小提琴略有不同。

我希望标题和内容文本像它们一样对齐，但我将它们放在复选框的右侧，标题与复选框的高度相同。这将是最有意义的，也是最易读的。

我该怎么做呢？

Answer 1

我已经用一个工作示例更新了你的小提琴

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

看起来这就是你要找的东西。第一行是复选框旁边的标题及其下方的说明。

另外两个是复选框旁边的所有文本。如果您想让所有其他人作为示例第 1 行。将第<div style="clear: both"></div>1 行向上移动。

如果您希望描述文本与标题文本对齐。margin-left在您的元素上使用<p>以对齐它或将其全部放在<table>.

Answer 2

这是我的版本：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 稍微调整间距。