html - 如果没有包围在 ... 中，则消失的 div - 为什么会这样？

Question

我有一个带有 li 的 ul，后者又包含一些 div。你可以在 jsFiddle 上看到它:http://jsfiddle.net/rtKra/

这是 ul 结构:

<ul class="categoryListing">

<li class="category">
    <div class="hoverMenu">
        <a class="edit">
            <img class="hoverButton editIcon" src="${baseRef}/images/editpencil.png"/>
        </a>
        <a class="delete">
            <img class="hoverButton deleteIcon" src="${baseRef}/images/deleteredicon.png"/>
        </a>
    </div>

    <div style="width:20px; height:20px; background-color:red; position:relative; top:2px; margin:0; padding:0; float:left; border-radius:2px; text-align:center;"><div class="arrow-down"></div></div>
    <div style="width:185px; margin:0; padding:0; float:right; z-index:100; display:visible;">Here is the name of the category that you want to use</div>
    <!--DISAPPEARING DIV-->


</li>

<li class="category">
    <div class="hoverMenu">
        <a class="edit">
            <img class="hoverButton editIcon" src="${baseRef}/images/editpencil.png"/>
        </a>
        <a class="delete">
            <img class="hoverButton deleteIcon" src="${baseRef}/images/deleteredicon.png"/>
        </a>
    </div>
    <div style="position:relative; display:block">
        <div style="width:20px; height:20px; background-color:yellow; position:relative; top:2px; margin:0; padding:0; float:left; border-radius:2px; text-align:center;">&#9660;</div>
        <div style="width:185px; margin:0; padding:0; float:right;">Here is the name of the category that you want to use</div>
    </div>
</li>
</ul>

问题是，如果内容不在外部 div 中，则带有内容的 div 就会消失样式设置为显示: block 。发生这种情况有原因吗？？

我使用内联样式只是为了测试布局...如果您愿意，可以在上面的 url 上看到 ul 和 li 的样式。但是我是否遗漏了一些阻止 div 显示的 CSS 东西？这是为什么？

Answer 1

我无法在这里重现它(我在这台机器上只有 Firefox)，但我想我可以猜出问题是什么:

问题很可能是因为 <div>包含在 <li> 中，并且因为 <div>默认样式为 display:block; ，而 <li>默认样式为 display:list-item; .

display:list-item与 display:inline 类似因为它不能包含 block 元素。规则说你不能有 block inline 中的元素元素。这没有意义。

显然人们一直这样做，浏览器必须能够应对它，但这是一个错误，有些浏览器会比其他浏览器应对得更好。

问题的解决方案是设置 <li> 的样式。作为display:inline-block; .

inline-block是一种设置显示属性样式的方法，使元素与其周围的其他元素保持内联，但可以包含 block 类型内容。

所以添加这个 CSS，你应该没问题:

li.category { display:inline-block; }

希望对您有所帮助。正如我所说，我无法在此处进行测试，但如果它解决了问题，请告诉我。