动态插入均匀间隔列表项目打破对齐方法

我一直在使用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; 
}

来源

2013-03-26 Stephen Searles

有元素之间没有空格。看看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

来源

2013-03-26 21:12:09 Maksym

你可以做什么苹果的网站做，让你的菜单项display: table-cell; 这可能不是完全跨浏览器兼容的（如IE6大概会失败），但它根本不需要任何javascript

来源

2013-03-26 21:27:04 Populus

动态插入均匀间隔列表项目打破对齐方法

回答

相关问题