Html 创建单选按钮框的策略：

以下是我在此基础上修改的一些代码：

我有一个复选框的所有元素样式图像，…字体，颜色等

我只是不知道怎么做布局。我没有策略。但我想要的和小提琴只有一点不同

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

---

我该怎么做呢？

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

看起来这就是你要找的。第一行是复选框旁边的标题和下面的说明

另外两个复选框旁边有所有文本。 如果需要，请将所有其他列作为示例行1。向上移动

1行

如果希望说明文本与标题文本对齐。在

元素上使用

左边距

将其对齐或将其全部放入

以下是我的版本：

我根本没有改变你的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>


正常的
添加书签时，它将被发布到提要中。您有一个非成员可以查看的公共页面。
私有的
您添加的书签不会发布到提要。您没有公共页面。
秘密
与private相同，您的所有数据都使用NSA批准的算法进行加密。

为了得到这个布局，我把你的
标签换成了
。然后我把每套收音机/标题/文本包装在一个
中。如果您愿意，可以使用CSS稍微调整间距。
人们希望单选按钮是圆形的，复选框是方形的。你不应该破坏既定的UI标准。样式是一回事，完全改变形状是另一回事。我会在有时间后更新…这只是一个起点。是的，但不确定您想要描述文本的位置，这就是为什么我做了两个选项的示例。您希望它们作为第二行和第三行吗？或者你想让所有人都成为第一排吗？好的，你把跨距放在标签旁边。很抱歉格式化了，我整理了一下。这是我所能想到的最简单的方法——用块级标签交换内联标签，所有东西都堆叠起来；最后一件事…第二个跨度…有没有办法让它停在第一个跨度附近（就在它的右边）…这样它就形成了一个类似“块”的形状？对不起，我不明白你在问什么-它不是就在前一个跨度的旁边吗？你说的是把描述放在标题的右边，包括它下面的任何一行吗；浮动：左；