0

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

这个小提琴演示了静态和动态版本。

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

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;
}
4

2 回答 2

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>';

一些相关文章： -与内联块元素之间的空间作斗争

于 2013-03-26T21:12:09.687 回答
0

你可以做苹果网站所做的事情并制作你的菜单项display: table-cell; 这可能不完全跨浏览器兼容（例如 IE6 可能会失败），但它根本不需要任何 javascript

于 2013-03-26T21:27:04.310 回答