Question

我一直使用this answer中的技术来区分列表项，但最近的更改要求我动态插入元素。我发现由于某种原因，如果动态插入元素，该方法将完全停止工作。为什么呢？

This fiddle演示了静态和动态版本。

如链接问题所示，基本思路如下。只是当HTML通过Javascript插入到页面时，菜单项不合理。

HTML

<div id="menuwrapper">
    <div class="menuitem">menu</div>
    <div class="menuitem">menu</div>
    ...
    <span class="stretcher"></span>
</div>

CSS

#menuwrapper, #dynamic {
    height: auto;
    background: #000;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
    min-width: 300px; /* just for demo */
}

#dynamic {
    background: blue;
}


.menuitem {
    width: auto;
    height: 40px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1
    background: #000;
    color: yellow;
}

.stretcher {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}

Answer 1

元素之间没有空格。看看jsfiddle

document.getElementById("dynamic").innerHTML = '<div class="menuitem">CAREERS</div> <div class="menuitem">TRADE</div> <div class="menuitem">CONTACT US</div> <div class="menuitem">PRIVACY POLICY</div> <div class="menuitem">T&amp;CS</div> <div class="menuitem">SITEMAP</div> <span class="stretcher"></span>';

一些相关文章： - Fighting the Space Between Inline Block Elements

Answer 2

您可以执行Apple网站的操作并制作菜单项display: table-cell; 这可能不是完全跨浏览器兼容（例如IE6可能会失败），但它根本不需要任何javascript

动态插入均匀间隔的列表项打破了合理的方法

2 个答案: