家長與直列CSS不承擔其內容的寬度

我有以下CSS父容器：家長與直列CSS不承擔其內容的寬度

.options { 
    background-color: white; 
    box-shadow: 0 5px 10px rgba(0,0,0,.2); 
    color: black; 
    display: inline-block !important; 
    margin-top: 100px; 
    left: 50%; 
    overflow: auto; 
    position: absolute; 
    top: 0; 
    -webkit-transform: translateX(-50%); 
    transform: translateX(-50%); 
}

及其子有：

.optionContainer{ 
    display: block; 
    float: left; 
}

我儘量做到什麼就是讓一個兒童和另一個兒童相互對齊，以擴大他們的總寬度，但兒童的數量並不固定。這適用於flexbox。

但我想用inline-block實現它，因爲我必須支持舊版瀏覽器。

來源

2017-02-27 Avraam Mavridis

你的意思是內聯塊，說內聯框？ – AHBagheri

@AHBagheri是的，很抱歉，正在更新。使用內聯塊對孩子似乎並沒有解決問題 –

當我糾正答案，只有刪除浮動左，它應該工作。 – AHBagheri

移除左側的兒童浮標。它應該有浮動：無。此外，孩子的顯示應該是：inline-block。

https://jsfiddle.net/fxm3kpj7/

.optionContainer{ 
    display: inline-block; 
}

來源

2017-02-27 10:31:12 AHBagheri

這裏是我有問題的完整的dom樹，http://jsfiddle.net/2hoz47se/ –

我會盡量給家長display: block，定義min-width，固定height和overflow-x: visible。

來源

2017-02-27 11:00:33 Johannes

家長與直列CSS不承擔其內容的寬度

回答

相關問題