是否可以模拟一个没有？

Question

请看一下这段代码：

<span class="something">
    <label>test1</label><br/>
    <label>test2</label><br/>
    <label>test3</label>
</span>

这将创建一个垂直的标签列表。没有使用CSS的<br>标签可以做到这一点吗？可以使用此HTML代码显示相同的垂直对齐标签列表吗？：

<span class="something">
    <label>test1</label>
    <label>test2</label>
    <label>test3</label>
</span>

Answer 1

你可以这样做：

span.something label {
  display: block; /* as opposed to display: inline; */
}

这是有效的，因为默认情况下<label>是inline元素。如果将它们更改为显示块，它们将显示在列表中，并在它们之间有换行符。

然而，这可能是做你想做的事情的坏方法。你真正想要的是一个无序列表：

<ul class="something">
  <li>test1</li>
  <li>etc...</li>
</ul>

要摆脱要点：

ul.something {
  list-style: none;
}

Answer 2

您可以为display:block设置label，这将调整它们以显示在新行上。

示例：

http://jsfiddle.net/niklasvh/eZ8t5/

Answer 3

或者，不用更改span的内容来阻止元素：

span.something label:after {content: '\A'; white-space: pre-line}

请参阅http://jsfiddle.net/VsnKx/

编辑：另一种方式（如果你不介意浮动）是

span.something label {float:left; clear:both}

虽然使用了浮点数，但它不使用:after，这可能是不受欢迎的。您还必须clear后span的第一个元素。{/ 1>

Answer 4

有可能。使用此css代码：

span.something label{
 display:block;
 clear:both;
}

Answer 5

是的，有几种方法，其他答案中提到的方法以及设置label { display: table-row}。但是，没有明显的理由不使用br标签或div容器或HTML中的表格，如果您希望标签位于不同的行上，并且没有明显的理由想要这样（标签是什么）没有相关的输入字段？）。