異なるいくつかの理由IE、残り

Question

ための出力IEで[OK]をクリックし、このクラスの出力が、Firefoxで単語や行（|）を中心にされていません。

.horz_list li { 
    display: inline; 
    background-color: #CEE3F8; 
    border-right-style:thin; 
    padding-right: 4px; 
    padding-left: 4px; 
} 

これは、出力のためのページです。

<div id="top_nav"> 
    <ul class="horz_list"> 
    <li><a href="<?php echo APP_DIR.'index.php?action=newest'; ?>">Nuevas</a></li> 
    <li><a href="<?php echo APP_DIR.'index.php?action=comments&param=new'; ?>">Comentarios</a></li> 
    <li class="last"><a href="<?php echo APP_DIR.'index.php?action=submit'; ?>">Enviar</a></li> 
    </ul> <!-- ul.horz_list --> 
</div> <!-- top_nav --> 

誰もがなぜこのことを知っていれば、ありがとう。

Answer 1

リーのプロパティ

.horz_list li{ 
    display: block; /* block level */ 
    float: left; /* float them inline to the left */ 
    overflow: hidden; /* this will force the div to stretch to it's contained element */ 
    background-color: #CEE3F8; 
    border-right-style:thin; 
    padding-right: 4px; 
    padding-left: 4px; 
} 

を変更してみてください...またはあなたがブロック全体が中心に何Ben described、必要ならば、それはそれはだ場合でも、幅を持っているブロックを含むだことを確認し

.horz_list { 
    margin: 0 auto; 


} 

を使用100％。

Answer 2

リストアイテムを水平に中央に配置しようとしている場合、これはIEと他のブラウザとでは異なる方法で行われます。あなたの<ul>にmargin-left:auto;margin-right;autoを設定してみてください：インラインで、あなたのHTMLコード内の改行はちょうどあなたの場合のように（余分なスペースを作成します。

.horz_list { 
    margin-left: auto; 
    margin-right: auto; 
} 

Answer 3

おそらくFirefoxで余分なスペースの理由は、あなたがディスプレイとしてLIを設定した場合ということです「lorem（改行）ipsum」と入力すると、ページ内に左右にスペースがある単語が表示されることがあります）。

てみてください、例えば、</LI> ....この<リチウムのよう< LI>タグを一緒に固執する> < LI> ...と私は、これは不要なスペースを削除すると思います。

すべてを1行に入れたくない場合は、アレックスの提案が有効ですが、終了ULの後に< div style = "clear：both"> </div>を追加する必要があります。浮遊要素の