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 />の最後にa を追加できます</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

次のマークアップを考えると、3 つのオプションが考えられます。

<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 フィドルのデモ。