Question

我希望将span填充为垂直而不是将其作为水平

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

expected result
    1
    2
    3

我怎么能这样做？

Answer 1

创建CSS规则。

span {
display:block;
}

Spans是内联元素，因此它们会彼此相邻。通过将它们更改为块元素，它们将叠加在一起。

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

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

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 all （可能）执行您想要的操作：

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

DIV填充元素为垂直

4 个答案: