Question

我有HTML代码

<form id="answers">
blue
<input id="0" type="radio">
red
<input id="1" type="radio">
pink
<input id="2" type="radio">
<input type="submit">
</form>

我希望在新行中包含每个元素。我不想使用像<br>这样的东西。在CSS文件中，我试过这样做：display: block但没有改变。

Answer 1

#answers input {display: block;}

这将使每个输入都在自己的行中。如果您希望将每个输入及其标签放在一行中，您应该执行类似

的操作

<form id="answers">
    <label>blue <input id="0" type="radio"></label>
    <label>red <input id="1" type="radio"></label>
    <label>pink <input id="2" type="radio"></label>
    <input type="submit">
</form>

的CSS： #answers label {display：block;}

http://jsfiddle.net/barakedry/y6p54vzg/

Answer 2

您可能需要使用box-sizing:border-box;。

此主题中有关于此主题的更多信息：input with display:block is not a block, why not?

Answer 3

如果您可以按照评论和答案中的说明更改HTML代码，则可以使用Label或display:block;的任何其他元素（如div）来包装输入和文本。但是如果你不能改变你的HTML代码，那么使用纯CSS就不可能接近那个目标，但在这种情况下你可以使用JQuery：

$("input").after("<br />");

<强> Check JSFiddle Demo

在CSS中为每个标签创建新的行

3 个答案: