Question

我已经写了这个小fiddle来展示我想要的东西，但我想知道的是，是否要将.stack-slot元素设计成它们; （a）缩小到其内容的大小，（b）如图所示，使用css规则而不是<br/>标签垂直叠加在另一个之上？

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 example

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

Answer 2

您应该对分组的内容使用无序列表。

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

CSS：

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

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

2 个答案: