動態插入均勻間隔列表項目打破對齊方法

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

動態插入均勻間隔列表項目打破對齊方法

回答

相關問題