css - 如何使用CSS将单选按钮定位在 block 外

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;
}

我想要两种效果:

1. 我想把标签放在外面，在彩色线条的上面。我想在单选按钮的同一列上添加标签。
2. 我想画一条垂直线(但我想如果前面有一个解决方案会很容易)

有人对此有所了解吗？

问候

Answer 1

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

演示: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;
}