Javascript 列表元素的显示顺序不正确

。。。动态插入时。我不会凭直觉这样做，很难相信这是预期的行为，但当我通过使用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";
        }
    });

一种解决方案会导致此问题：

---

其中有两个不同的菜单类：

.user menu

（在span标记中）和

.top menu

（包括所有项目，也包括span）。可能他们有不同的CSS。。。另外，span的使用有点奇怪…

其中有两个不同的菜单类：

.user menu

（在span标记中）和

.top menu

（包括所有项目，也包括span）。可能他们有不同的CSS。。。此外，该跨度的使用有点奇怪…

这可能与将

span

放在

ul

中有关，这是无效的HTML

许可内容：

零个或多个

元素，最终与
和
元素混合

资料来源：


如果需要创建列表项的子组，则嵌套列表

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














更新（基于评论和修订的问题）

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

以下是删除它的两种方法：


将
显示
值更改为
块
将
垂直对齐：底部
添加到规则


有关解释和其他方法，请参阅本帖：



这可能与将
span
放在
ul
中有关，这是无效的HTML


许可内容：

零个或多个
元素，最终与
和
元素混合

资料来源：


如果需要创建列表项的子组，则嵌套列表

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














更新（基于评论和修订的问题）

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

以下是删除它的两种方法：


将
显示
值更改为
块
将
垂直对齐：底部
添加到规则


有关解释和其他方法，请参阅本帖：



在
li
和span之间有一个
span
，span是
inline
元素您是否使用id用户菜单对span应用一些css？因为整个跨度都被替换了，我想这是因为它继承或应用了一些css。你的HTML是无效的。
元素只能有
元素作为子元素。不，只有子元素
才能包含更多的
和
元素，但就子元素而言，只有
作为
和
元素的子元素才有效。在
li
和span是
内联的
元素之间有一个
span
元素。您是否使用id用户菜单对span应用了一些css？因为整个跨度都被替换了，我想这是因为它继承或应用了一些css。你的HTML是无效的。
元素只能有
元素作为子元素。不，只有子元素
才能包含更多的
和
元素，但就子元素而言，只有
作为
和
元素的子元素才有效。它们有相同的显示，我在JavaScript中显式匹配它。你说的“显示”是什么意思？css属性
display:none
它们有相同的显示，我在JavaScript中显式匹配它。你说的“显示”是什么意思css属性
display:none
当然，我添加了你的代码，并在问题中发布了一张图片。在这行：
，尝试将
显示
值切换为
块
。如果你不想更改
显示
值，然后添加
垂直对齐：底部到内联样式。每个固定问题似乎都会产生一个新问题，因此我放弃了将这些元素分组的想法，只需分别切换它们。是的，我的手指麻木了，谢谢你的帮助。关于下一个问题。当然，我添加了您的代码，并在问题中发布了一张图片。在这一行：
，尝试将
显示
值切换为
块
。如果您不想更改
显示
值，请添加
垂直对齐：底部到内联样式。每个固定问题似乎都会产生一个新问题，因此我放弃了将这些元素分组的想法，只需分别切换它们。是的，我的手指麻木了，谢谢你的帮助。继续下一个问题。