13

私は次の単純な構造を持っています：

<div></div><span></span><span></span>

しかし、私はそれらすべてを1行に強制したい! 現時点では、次のように表示されます。

<div />
<span /><span />

残念ながら、最初の要素を div にする必要があります。div は棒グラフの棒として機能します (角が丸く、幅 = jquery のもの、内部にコンテンツとブロックの色はありません)、次のスパンは棒が表す値であり、最後のスパンは値が関連付けられているものです。

だから欲しい

[____________] 25% ObjectA
[________________________] 50% ObjectB
[______] 12.5% ObjectC
[______] 12.5% ObjectD

そしてそうではない

[____________] 
25% ObjectA
[________________________] 
50% ObjectB
[______] 
12.5% ObjectC
[______] 
12.5% ObjectD
4

4 に答える 4

20

CSS プロパティdisplay: inline-blockを div に配置して、行全体を占有するのではなく、インライン要素のように動作させます。

編集：

after疑似要素を使用して各行をクリアするという@Mr_Greenの提案は、レイアウトの破損を防ぐために絶対に必要です。

于 2013-09-26T08:47:54.357 に答える
7

Dylan の提案は機能しますが、div の幅の 1 つが非常に小さい場合、次の div がこの div 要素とインラインになることがあります。このフィドルを参照してください。したがって、私の提案は、 に:afterなる疑似要素を使用することdisplay: blockです。この疑似要素は、すべてのバー セクションの最後のスパン用です。

div {
    /* width and height are just for example */
    width: 100px;
    height: 50px;
    background-color: red;
    display: inline-block;
}
div+span+span:after {  /* last span element's pseudo element */
    content:"";
    display: block;
}

働くフィドル

于 2013-09-26T09:06:01.910 に答える
3

<div>要素のデフォルトはであり、使用可能なすべての幅を占有するためdisplay: block、これを に設定する必要がありますdisplay: inline-block。また、行を で手動で改行する<br>か、最後に何か凝った処理<span>を行って残りの使用可能なスペースを埋める必要があります。

または、各行を別のブロック レベル要素 (別の など<div>) でラップして、新しい行を作成します。

于 2013-09-26T08:52:55.633 に答える
-1

スパンに CSS プロパティを追加します。

white-space: nowrap;
于 2019-12-19T13:42:39.680 に答える