如何使用css将单选按钮定位在块外

我想创建这样一个问题行

此时，我的html源代码是：

<p class="questionrow">
  <span class="question">question label</span>
  <span class="reponses">
    <input type='radio' class="radiocontrol"/><label class="radioanswer">Oui</label>
    <input type='radio' class="radiocontrol"/><label class="radioanswer">Non</label>
  </span>
</p>

我想要两种效果：

我想把标签放在外面，在彩色线的上面。我想把标签贴在单选按钮的同一列上

我想画一条垂直线（但我想如果有解决前一个问题的方法，这会很容易）

有人知道吗

---

关于

是否改用表格<代码>span对于这一点来说毫无意义。这正是表格的意义所在

<table>
    <tr>
        <th></th>
        <th><label for="radio1">Label 1</label></th>
        <th><label for="radio2">Label 2</label></th>
        <th><label for="radio3">Label 3</label></th>
    </tr>
    <tr>
        <td>Lorem ipsum dolor sit amet.</td>
        <td><input type="radio" name="group" id="radio1" /></td>
        <td><input type="radio" name="group" id="radio2" /></td>
        <td><input type="radio" name="group" id="radio3" /></td>
    </tr>
</table>

标签1
标签2
标签3
Lorem ipsum dolor sit amet。

是否改用表格<代码>span对于这一点来说毫无意义。这正是表格的意义所在

<table>
    <tr>
        <th></th>
        <th><label for="radio1">Label 1</label></th>
        <th><label for="radio2">Label 2</label></th>
        <th><label for="radio3">Label 3</label></th>
    </tr>
    <tr>
        <td>Lorem ipsum dolor sit amet.</td>
        <td><input type="radio" name="group" id="radio1" /></td>
        <td><input type="radio" name="group" id="radio2" /></td>
        <td><input type="radio" name="group" id="radio3" /></td>
    </tr>
</table>

标签1
标签2
标签3
Lorem ipsum dolor sit amet。

这是一个CSS解决方案，没有

表

div {float:left;padding:0 1em; border-right:1px solid gray; height:50px;}

<div>
    <p>question label</p>
</div>

<div>
    <label>Oui</label><br />
    <input type='radio'/>
</div>

<div>
    <label>Non</label><br />
    <input type='radio'/>
</div>  

div{float:左；填充：0 1em；右边框：1px实心灰色；高度：50px；}
问题标签

是的

非


我可以在FF和Chrome中使用。
这里是一个CSS解决方案，没有
表

div {float:left;padding:0 1em; border-right:1px solid gray; height:50px;}

<div>
    <p>question label</p>
</div>

<div>
    <label>Oui</label><br />
    <input type='radio'/>
</div>

<div>
    <label>Non</label><br />
    <input type='radio'/>
</div>  

div{float:左；填充：0 1em；右边框：1px实心灰色；高度：50px；}
问题标签

是的

非


在FF和Chrome中为我工作。
这里有一个与您的示例图像非常相似的解决方案

演示：

HTML

<div class="row">
    <p class="q">This is a question?</p>
    <ul class="options">
        <li><label>One</label><input type="radio" /></li>
        <li><label>Two</label><input type="radio" /></li>
        <li><label>Three</label><input type="radio" /></li>
        <li><label>Four</label><input type="radio" /></li>
    </ul>
</div>

这是一个与您的示例图像非常相似的解决方案

演示：

HTML

<div class="row">
    <p class="q">This is a question?</p>
    <ul class="options">
        <li><label>One</label><input type="radio" /></li>
        <li><label>Two</label><input type="radio" /></li>
        <li><label>Three</label><input type="radio" /></li>
        <li><label>Four</label><input type="radio" /></li>
    </ul>
</div>

你能把你的例子放到jsfiddle.net上吗？变得容易多了！你能把你的例子放到jsfiddle.net上吗？变得容易多了！我以为我们现在必须避免使用桌子？这不是一种纯粹的css方式吗？你应该避免使用表格进行布局。不是为了表示数据，这就是它们的用途。使用最符合逻辑的HTML元素。我想我们现在必须避免使用table？这不是一种纯粹的css方式吗？你应该避免使用表格进行布局。不是为了表示数据，这就是它们的用途。使用最符合逻辑的HTML元素。