防止在单选按钮下方包装文本

Question

我可以用这张图片描述我想要的最佳方式:

如何使文本与顶部文本对齐,而不是单选按钮？

相关CSS如下:

.basic-grey {
    width: 600px;
    margin-right: auto;
    margin-left: auto;
    background: #FFF;
    word-wrap: break-word; 
    padding: 20px 30px 20px 30px;
    font: 12px "Myriad Pro", sans-serif;
    color: #888;
    text-shadow: 1px 1px 1px #FFF;
    border:1px solid #DADADA;
}

}
.basic-grey h1>span {
    display: block;
    font-size: 11px;
}
.basic-grey label {
    display: block;
    margin: 0px 0px 5px;
}
.basic-grey label>span {
    float: left;
    width: 80px;
    text-align: right;
    padding-right: 10px;
    margin-top: 10px;
    color: #888;
}
.basic-grey select {
    background: #FFF url('down-arrow.png') no-repeat right;
    background: #FFF url('down-arrow.png') no-repeat right);
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
    width: 72%;
    height: 30px;
}
.basic-grey textarea{
    height:100px;
}
.basic-grey p {
    display: inline ;
}
;}

标记:

<form name="frm1" action="index4.php" method="POST" class="basic-grey">
    <h3>2.  I have taught the course, several times face to face, that I wish to transform into a blended format.  </h3>
    <input type="radio" name="q2" value="1" /> <p>This statement accurately reflects my experience.</p><br>
    <input type="radio" name="q2" value="2" /> <p>This statement partially reflects my experience (I have taught the course only a few times or once before).</p><br>
    <input type="radio" name="q2" value="3" /> <p>This statement does not reflect my experience (this a new course that I will teach for the first time in a blended format).</p><br>
    <br>
    <input type="submit" name="button" class="button" value="Submit" /> 
</form>

当我尝试浮动单选按钮时,所有文本都变得不合适.

Answer 1

这很简单,只要把你的label元素,display: block;并使用margin-left了label和float你的单选按钮,向左

Demo

Demo 2 (没什么好看的,只是用了多个收音机进行演示)

input[type=radio] {
    float: left;
}

label {
    margin-left: 30px;
    display: block;
}

请注意,如果您将带有标签的收音机存储在一个li元素中,就像这样

<ul class="radiolist">
    <li>
        <input type="radio"><label>Your text goes here</label>
    </li>
</ul>

因此,请确保使用类似的东西自行清除它们

.radiolist li:after {
    content: "";
    clear: both;
    display: table;
}

这将确保您自我清除所有li元素,并且关于:after伪,它在IE8中得到很好的支持,因此无需担心.

Answer 2

Flexbox解决方案:

现在Flexbox得到了广泛的支持,简单的display: flex;就像魔术一样.

只需用input文本包装和文本<label>(这样点击文本也可以切换输入而不需要a for=""),瞧!

.flex-label {
  display: flex;
}
input[type=radio] {
  /* one way to help with spacing */
  margin-right: 12px;
}

<label class="flex-label">
  <input type="radio">
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </span>
</label>

如果你想保持<label>单独,只需将两者都包装在一个元素中,以便应用flex修复:https://jsfiddle.net/pn4qyam5/