Question

我想将标签的文本和该标签下的div水平排列，但div保持包装到下一行。这是我到目前为止所尝试的内容。

HTML

<label>
   <input class="wpProQuiz_questionInput" type="radio" name="question_23_549" value="2"> 25-50% 
   <div class="actual">=&gt; Actual EF 30%</div>
</label>

CSS

.actual {
    text-wrap:none;
}
.wpProQuiz_questionInput {
    text-wrap:none;
}

JSfiddle

Answer 1

更改为内联块并且可以正常工作

https://jsfiddle.net/grgjq9uh/12/

.actual {
    display: inline-block;
 }

Answer 2

text-wrap不是有效的CSS属性。您可能正在寻找的是white-space属性：

white-space:nowrap;

Answer 3

div默认为display:block;，因此会转到第二行，但您可以使用display:inline-block;或将div元素更改为span元件。

<强>显示：内联块;

Jsfiddle

.actual {
  display: inline-block;
  vertical-align: middle;
}

<label>
  <input class="wpProQuiz_questionInput" type="radio" name="question_23_549" value="2">25-50%
  <div class="actual">=&gt; Actual EF 30%</div>
</label>

跨度元素

Jsfiddle

<label>
  <input class="wpProQuiz_questionInput" type="radio" name="question_23_549" value="2">25-50%
  <span class="actual">=&gt; Actual EF 30%</span>
</label>

Answer 4

您的div正在换行到下一行，因为其默认display为block。

尝试将其更改为：

.actual {
    display: inline-block;
}

jsfiddle

水平对齐<label>标签下的元素

4 个答案: