CSS條形圖溢出，兩行而不是單行

將一個簡單的條形圖放在一起但是它在某些值上溢出，目標是使其響應，所以我使用％而不是固定值。CSS條形圖溢出，兩行而不是單行

如果有100％的集裝箱寬度它的工作原理，但我需要並排有這三個方面的這樣的容器爲33％

div.label { 
    background:blue; 
    width:20%; 
} 

div.bar{ 
    width:80%; 
} 
div.bar_value{ 
    background:green; 
    width:77%; 
} 

.row_container{ 
    background:black; 
    width:33%; 
} 

.row_container div { 
    display: inline-block; 
}

這裏要說的是，我有 http://jsfiddle.net/7h64p0h6/1/

一個的問題摘錄

來源

2015-10-05 Astronaut

應該是這個樣子？ http://jsfiddle.net/sebastianbrosch/7h64p0h6/2/ –

可能重複[如何刪除內聯塊元素之間的空間？]（http://stackoverflow.com/questions/5078239/how-to-remove-的空間內聯間 - 嵌段 - 元素） – Stickers

您需要避免div與顯示行內塊元素之間的空間問題。

.row_container{ 
    background:black; 
    width:50%; 
    font-size:0; 
} 

.row_container div { 
    display: inline-block; 
    font-size:16px; 
    vertical-align: top; 
}

看到它的工作：http://jsfiddle.net/7h64p0h6/3/

來源

2015-10-05 16:17:30

CSS條形圖溢出，兩行而不是單行

回答

相關問題