0

私はこの回答にある手法を使用してリストアイテムの間隔を空けてきましたが、最近の変更により、要素を動的に挿入する必要があります。要素が動的に挿入されると、何らかの理由でアプローチが完全に機能しなくなることがわかりました。なんで？

このフィドルは、静的バージョンと動的バージョンを示しています。

リンクされた質問に見られるように、基本的な考え方は以下のとおりです。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;
}
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 に答える