html - DIV 填充元素为垂直

Question

我想将跨度填充为垂直而不是水平的

<div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

expected result
    1
    2
    3

我怎么能这样做？

Answer 1

创建 CSS 规则。

span {
display:block;
}

跨度是内联元素，因此它们将彼此相邻流动。通过将它们更改为块元素，它们将相互堆叠。

Answer 2

您可以在每个标签<br />的末尾添加一个</span>

Answer 3

使用 CSS 来设置display: block. 例如：

<div id="myDiv">
    <span>1</span>
    <span>2</span>
    ...
</div>

和CSS：

div#myDiv span {
    display: block;
}

或者（可能更合适），只需<span>用 div 替换元素。

Answer 4

鉴于以下标记，我能想到三个选项：

<div id="block">
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

<div id="listItem">
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

<div id="clearLeft">
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

以下 CSS全部（可能）执行您想要的操作：

div {
    width: 50%;
    margin: 0 auto 1em auto;
    border: 2px solid #000;
    overflow: hidden; 
}

span {
    background-color: #ffa;
    border-bottom: 2px solid #000;
}

#block span {
    display: block;
}

#listItem {
    display: list; /* just for...(pseudo-semantic) correctness, I guess */
    overflow: visible; /* to show the default list-markers */
}

#listItem span {
    display: list-item;
}

#clearLeft {
    overflow: hidden; /* to wrap the div borders around the
                         floated content */
}

#clearLeft span {
    float: left;
    clear: left;
}
​

JS 小提琴演示。