HTML和CSS - 強制DIV> SPAN>跨度上

同一行

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

但我想強迫他們都在同一行！此刻，他們出現：

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

不幸的是，我必須第一個元素作爲一個div，我有一點HTML編輯權力，我通過其他程序編輯，在div充當從酒吧條形圖（圓角，寬度= jquery的東西，裏面沒有內容和塊的顏色），下一個跨度是條形圖的值，最後一個跨度是值的關聯。

，所以我想

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

，而不是

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

來源

2013-09-26 Phish

這裏發表您的代碼.. –

把CSS屬性display: inline-block的DIV使它像一個內聯元素，而不是採取了整條生產線。

編輯：

@ Mr_Green的使用after僞元素來清除每一行的建議是絕對必要的，以防止破碎的佈局。

來源

2013-09-26 08:47:54

謝謝你，我現在覺得都不好意思！公平地說，它現在很清早。謝謝，當它讓我時會打勾。 – Phish

這可以工作，但有時第二個酒吧也將符合第一個酒吧，如果他們的寬度很小。 –

@Mr_Green這是真的，這對'
'標籤來說可能是一個恰當的用例，但如果他對html有零控制權，那麼可能需要基於浮動的佈局。 –

由於<div>元素默認爲display: block，佔用所有可用寬度，所以您需要將其設置爲display: inline-block。您還需要使用<br>手動分割線條，或者在最後的<span>上做一些特殊處理，以填充剩餘的可用空間。

或者，將每行包裝到另一個塊級元素（例如另一個<div>）中以創建新行。

來源

2013-09-26 08:52:55

Dylan的建議可行，但有時如果其中一個div的寬度非常小，那麼下一個div將與該div元素內聯。看到這fiddle。所以，我的建議是使用: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; 
}

Working Fiddle

來源

2013-09-26 09:06:01

HTML和CSS - 強制DIV> SPAN>跨度上

回答

相關問題