防止在单选按钮下方换行

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 psuedo，它在IE8 中得到了很好的支持，因此无需担心。

Answer 2

Flexbox 解决方案：

现在 flexbox 得到了广泛的支持，一个简单的display: flex; 将像魔术一样工作。

只需将input 和文本都用<label> 包裹起来（这样点击文本也可以切换输入，而无需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> 分开，只需将两者包装在一个元素中以应用弹性修复：https://jsfiddle.net/pn4qyam5/

Answer 3

这对我有用

input[type=radio] {
  float: left;
  display: block;
  margin-top: 4px;
}

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

Answer 4

.basic-grey {
    word-wrap: break-word;
    font: 12px "Myriad Pro",sans-serif;
    color: #888;
    text-shadow: 1px 1px 1px #FFF;
}
.basic-grey p {
    padding-left:20px;
}
.basic-grey input[type=radio] {
    margin-left:-15px;
}

假设您的标记是：

<p><input type="radio"/>This statements actually...</p>

Answer 5

我喜欢这个：

HTML：

<input type="radio" name="vacation" value="Ski Trips"><label>very long label ...</label>

CSS：

input[type="radio"] { 
    position: absolute;
}
input[type="radio"] ~ label { 
    padding-left:1.4em;
    display:inline-block;
}