css - 引导程序中的垂直堆叠跨度标签

Question

我正在尝试在引导程序 div.controls 内堆叠跨度。多个 span.label 默认为水平堆叠，但我希望每个 span.label 都垂直列出，而是在它自己的行上。

这是我目前的显示方式：

<div class="controls readonly-display">
    <span class="label">test</span>
    <span class="label">test 2</span>
</div>

http://jsfiddle.net/gMN4f/3/

Answer 1

我同意您可能应该考虑使用列表，但如果没有，只需添加以下内容以使您的跨度垂直堆叠：

span {
  position: relative;
  display: block;
}

这是一个例子：http: //jsfiddle.net/gMN4f/4/

Answer 2

在这里使用列表是正确的选择。我陷入了造型路径，忘记了改变结构。实际上，用无序列表包围 span 元素实际上也使列表项之间的垂直间距看起来更好。

这是我最终得到的结果：

<div class="controls readonly-display">
    <ul class="unstyled">
        <li><span class="label">test</span></li>
        <li><span class="label">test 2</span></li>
    </ul>
</div>

谢谢您的帮助。对不起，脑子放屁的问题。