Question

我有一个无序列表，显示每个列表项左侧的项目符号。在FF / IE中，子弹显示了一半。在Chrome中，它们根本不显示。通过将margin-left: 5px添加到<li>，我可以让它们显示出来。

但我真正想要理解的是为什么隐藏它们。我宁愿治疗病因而不是症状。我无法在小提琴中重现，所以这里是页面的链接。我尽可能地将其设为最小，并在页面中提供了解释。

http://help.projectorpsa.com/display/doc432m/Test

我正在使用名为Confluence的CMS系统，因此我对html标记没有太多控制权。这是标记，无论如何。

<div class="panelMacro">
    <table class="infoMacro">
        <tbody>
            <tr>
                <td>
                    <div class="panel" style="background-color: transparent;border-color: transparent;border-width: 1px;">
                        <div class="panelContent" style="background-color: transparent;">
                            <ul>
                                <li>A - There is no bullet displayed for this list. If I add margin-left: 6px to this &lt;li&gt; then I can see it. But I don't understand why this is happening. What is the bullet hiding behind?</li>
                                <li>B</li>
                                <li>C</li>
                                <li>D</li>
                            </ul>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Answer 1

由于这条规则：

table.infoMacro ul {
padding-left: 0px;
}

要么摆脱它，要么将填充增加到6px。

Answer 2

这就是custom.css第33行的原因：

table.infoMacro ul {
padding-left: 0px;
}

尝试覆盖此

Answer 3

尝试将list-style-position: inside;添加到ul

Answer 4

如果你升级html，你会看到你的 <div class="panel">设置为overflow：hidden;

将其更改为溢出：可见;你应该好好去。

HTML无序列表的子弹被遮挡了一半

4 个答案: