html - 水平内联 block 内 float 2 个元素

Question

我正在尝试使 span 和 ul 彼此相邻 float ，但没有固定宽度，它不会水平 float ，而是表现得像没有应用 float 一样并垂直堆叠。当我设置固定宽度并从 updates-documents-holder-inside 中删除 display:inline-block 时，它首先会按预期运行。 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

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

这是一个 fiddle 。混合 float 和 block 元素是问题的原因。他们在一起玩得不好。

更新的 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;
}