2012-01-31 7 views
0

うまくいけば、これは私が行方不明の単純なものです、私はLIリンクのセットを包含するOLがあります。 Chromeとfirefoxでは、これは完全に機能します。IE8では、ページの下に垂直方向に移動する番号付きリストとして表示されます。オーダーリストIEで垂直、他の場所で

HTML:

<div class="header"> 
    <img src="images/header.png" alt="Logo"> 
    <ol> 
    <li><a href="index.html">Home</a></li> 
    <li><a href="page2.html">page2</a></li> 
    <li><a href="page3.html">page3</a></li> 
    <li><a href="page4.html">page4</a></li> 
    <li><a href="page5.html">page5</a></li> 
    <li><a href="page6.html">page6</a></li> 
    <li><a href="page7.html">page7</a></li> 
    </ol> 
</div> 

CSS。

.header { 
    width:888px; 
    height:119px; 
    margin: 0 auto; 
    margin-top: 20px; 
    padding:0; 
    text-align: left; 
} 
.header ol { 
    margin-top: -32px; 
    width: 888px; 
    padding:0; 
    margin-left: 10px; 
} 
.header li { 
    font-weight: bold; 
    display: inline; 
    padding-right: 20px; 
    padding-left: 20px; 
    border-right: solid 1px; 
    border-right-color: #FFFFFF; 
} 

何か基本的なものがありますか?いくつかの検索を行うことは私に解決策を提供していないようです。 LIにdisplay: inline;を使用するいくつかの提案がありますが、これは何の違いもありません。 私が探している動作は、ChromeとFirefoxで表示されているリンクの水平方向の順序です。

+1

のようなものと交換してください、あなたはリストの項目を水平方向にレイアウトされたかったかどうかの問題で言うことができますまたは垂直に? –

+0

Hehは、明示的に言わなくても全体的な質問を書くことができました。ジェイソンは私の問題を見つけることができましたが、私は将来の参照のためにそれを更新します。 – Draineh

+0

\ o /、他の人にとっては便利でしょう:-) –

答えて

3

IE8以下のIEでは、多くのブロックレベル要素でdisplay:inlineを実装する際に問題があります。

あなたはfloatliのを試みることができる...

のでdisplay:inlineを削除し、float:left

+0

うん。浮動小数点:左は魔法を行うべきです。 – zvona

+0

ありがとうございます。これは他のいくつかの変更の後に機能しました。何らかの理由で私は体のクラスで定義された高さを持っていました。 – Draineh

+0

それは@Drainehをうまくいってうれしい! –