Html 垂直方向的DIV填充元素

我想把跨度填成垂直的，而不是水平的

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

expected result
    1
    2
    3

1.
2.
3.
预期结果
1.
2.
3.

我该怎么做呢？

创建一个CSS规则

span {
display:block;
}

---

跨距是内联元素，因此它们将相邻流动。通过将它们更改为块元素，它们将堆叠在一起。

您可以在每个

标记的末尾添加

，使用CSS设置

显示：块

。例如：

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

---

或者（可能更合适），用div替换

元素。

考虑到以下标记，我可以考虑三个选项：

<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>

---

.

正确的答案可能是“使用更合适的标记”…但是您的数据太占位符，无法说明一组span元素是否真的错了。您可以使用

ul

并将日期改为

1

。这将是垂直的。

<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>

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;
}
​