Question

以下是我从此nifty site修改的一些代码：

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调整间距。

创建单选按钮框的策略：

2 个答案: