html - html/css，如何将元素推送到下一行？

Question

我已经写了这个小小提琴来展示我想要的东西，但我想知道的是，是否可以对.stack-slot元素进行样式设置，以便它们；<br/>(a) 缩小到其内容的大小和 (b) 如图所示，使用 css 规则而不是标签垂直堆叠？

html:

<span class='stack-panel vertical'>
    <span class='stack-slot'>
        <span class='content'>1</span>
    </span>
    <br/>
    <span class='stack-slot'>
        <span class='content'>2</span>
    </span>
    <br/>
    <span class='stack-slot'>
        <span class='content'>3</span>
    </span>
</span>

CSS：

.stack-panel.vertical .stack-slot
{
    /*TODO replace effect of <br/> tag*/
}

Answer 1

做这个：

.stack-panel.vertical .stack-slot {
    clear:left;
    float:left;
}

jsFiddle 示例

没有<br>标签，它们垂直堆叠，并缩小以适应其内容。

Answer 2

您应该对分组的事物使用未排序列表。

     <ul>
       <li>1</li>
       <li>2</li>
   </ul>

CSS：

ul, li {
   padding:0;
   margin:0;
   list-style:none
}