防止单选按钮下方的文本换行

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

更新答案

您可以使用 Flexbox 完成上述操作。

演示

<label>
  <input type="radio">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor beatae odit quo quia hic vitae repellat velit. Iste nam alias dolor maxime repudiandae similique cum et labore, dolorem, tempore voluptas.</p>
</label>

* {
  margin: 0;
  padding: 0;
}

label {
  display: flex;
  flex: 1;
  align-items: flex-start;
}

input[type=radio] {
  margin: 5px;
}

---

旧答案

这非常简单，只需将

label

元素转换为

display: block;

并使用

margin-left

作为

label

和

float

左侧的单选按钮

演示

演示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>

分开，只需将两者包装在一个元素中以应用 Flex 修复：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;
}