Question

我试图将span和ul相互靠近但没有固定的宽度它不会相互浮动，而是像浮动一样不应用并叠加垂直。当我设置固定宽度并从display:inline-block移除updates-documents-holder-inside时，它似乎首先按预期运行。 http://jsfiddle.net/Jx3dv/显示问题。

<div class="updates-documents-holder">
        <div class="updates-documents-holder-inside">
            <span><div></div></span>
            <ul>
                <li>Flytt av sopor.doc</li>
                <li>5FSE 0000 000</li>
                <li>Har blivit uppdaterad</li>
                <li>2014-28-15</li>
            </ul>
        </div>

的CSS

.updates-documents-holder{
float:left;
width:23.8em;
height:5em;
text-align:center;

}
.updates-documents-holder-inside{
display:inline-block;

}
.updates-documents-holder-inside > span{
display:block;
float:left;
background:green;
}
.updates-documents-holder-inside > span > div{
display:block;
 height:50px;
width:50px;

}
.updates-documents-holder-inside > ul{
display:block;
float:left;
text-align:left;
list-style:inside;
padding-left:1em;
background:red;
}

Answer 1

您不必应用任何固定宽度。只需从容器display:inline-block中删除div.updates-documents-holder-inside，

即可

这样两个元素都有足够的空间坐在一起。 Updated Fiddle

Answer 2

http://jsfiddle.net/aibrean/jSZyh/3/

这是一个小提琴。混合浮子和块元素是导致问题的原因。他们不能在一起玩得很好。

更新了CSS代码：

.updates-documents-holder-inside > span{
display:inline-block;
background:green;
}
.updates-documents-holder-inside > span > div{
    display:inline-block;
 height:50px;
    width:50px;

}
.updates-documents-holder-inside > ul{
display:inline-block;
text-align:left;
padding-left:1.5em;
background:red;
}

在内联块内部浮动2个元素水平

2 个答案: