... 动态插入时。我不会凭直觉想到这一点,并且很难相信这是预期的行为,但是当我通过使用 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";
}
});
导致此问题的一种解决方案:
最佳答案
这可能与放置 span
有关。在 ul
里面,这是无效的 HTML。
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
遵守规则
有关解释和其他方法,请参阅此帖子:
关于javascript - 列表元素显示顺序不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34535294/