javascript - 列表元素显示顺序不正确

Question

... 动态插入时。我不会凭直觉想到这一点，并且很难相信这是预期的行为，但是当我通过使用 JavaScript 更改它们的显示来动态插入列表元素时，它们会乱序显示。这张照片总结了这一点。

这是预期还是错误？

匹配显示类型的代码:

    Backbone.on('user_sign_in', function () {
        $A.log('user_sign_in event')
        if (getComputedStyle(self.E.main_nav, null).display === 'block') {
            self.E.user_menu.style.display = "block";
        } else {
            self.E.user_menu.style.display = "inline-block";
        }
    });

导致此问题的一种解决方案:

Answer 1

这可能与放置 span 有关。在 ul 里面，这是无效的 HTML。

<ul>

Permitted content:

zero or more <li> elements, eventually mixed with <ol> and <ul> elements.

来源:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul

---

如果您需要创建列表项的子组，请嵌套您的列表。

<ul>
    <li>...</li>
    <li>...</li>
    <li>
        <ul>
            <li>...</li>
            <li>...</li>
        </ul>
    </li>
    <li>...</li>
</ul>

---

更新(基于评论和修改后的问题)

在您的导航屏幕截图中，底部边缘的间隙可能是由 display: inline-block 引起的.

这里有两种删除它的方法:

• 更改display值 block
• 添加vertical-align: bottom遵守规则

有关解释和其他方法，请参阅此帖子:

• > inline-block boxes not fitting in their container