Question

我想创建一个像http://imageshack.us/photo/my-images/200/questionh.png/

这样的问题行

目前，我的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>

（但我可以改变它）

这是css：

.questionrow
{
  width:1000px;
  background-color: #EDF2BE;    
}

.question
{
  width: 300px;
  padding-left: 30px;
  padding-right: 30px;
  display: inline-block;
}

.reponses
{
  width: 600px;
  display: inline-block;
}

.radiocontrol {
  border: 1px solid #006;
  background: #ffc;
}

我想要有2个效果：

我想把标签放在彩色线的顶部。我想将标签放在单选按钮的同一列上。
我想绘制一条垂直线（但我想如果有一个解决方案，那将很容易）

有人对此有所了解吗？

此致

Answer 1

使用表格吗？ 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>

Answer 2

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

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>

适用于FF和Chrome。

Answer 3

这是一个非常类似于您的样本图像的解决方案......

演示：http://jsfiddle.net/Zjnw9/1/

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>

... CSS

.row {
    padding-bottom: 2em;
}
.q {
    background-color: #EDF2BE;
    margin-top: 1.2em;
    padding: 0.5em;   
}
.options {
    float: right;
    margin-top: -3.4em;
}
.options li {
    float: left;
    width: 100px;
    text-align: center;
    border-left: 1px solid #999;
    padding: 0em 0.5em 0.7em;
}
.options label {
    display: block;
    font-size: 9pt;
    padding-bottom: 0.8em;
}

如何用css定位块外的单选按钮

3 个答案: