2017-02-27 56 views
0

我有以下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实现它,因为我必须支持旧版浏览器。

+0

你的意思是内联块,说内联框? – AHBagheri

+0

@AHBagheri是的,很抱歉,正在更新。使用内联块对孩子似乎并没有解决问题 –

+0

当我纠正答案,只有删除浮动左,它应该工作。 – AHBagheri

回答

3

移除左侧的儿童浮标。它应该有浮动:无。此外,孩子的显示应该是:inline-block。

https://jsfiddle.net/fxm3kpj7/

.optionContainer{ 
    display: inline-block; 
} 
+0

这里是我有问题的完整的dom树,http://jsfiddle.net/2hoz47se/ –

0

我会尽量给家长display: block,定义min-width,固定heightoverflow-x: visible