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就会消失将样式设置为显示：块。是否有理由发生这种情况？

我只使用内联样式测试布局...如果你愿意，可以在上面的url上看到ul和li的样式。但我错过了一些阻止div显示的CSS事物吗？那是为什么？

Answer 1

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

问题可能是因为<div>包含在<li>中，并且因为<div>默认设置为display:block;，而{{1}默认设置为<li>。

display:list-item;与display:list-item的工作方式类似，因为它不能包含块元素。规则规定，display:inline元素中不能包含block元素。这没有意义。

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

问题的解决方案是将inline设为<li>。

display:inline-block;是一种样式化显示属性的方法，使元素相对于其周围的其他元素保持内联，但可以包含块类型内容。

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

inline-block

希望有所帮助。正如我所说的，我不能在这里测试，但如果能解决问题，请告诉我。

如果没有在<div style =“display：block;”> ... ... </div>中包围，消失的div - 为什么会这样？

1 个答案: