<a>個のリンクを2つの5つの行として表示させるにはどうすればよいですか？

Question

私は、次のしている：私はやりたい

<div id='hdr_thm'> 
    <div> 
     <a style="background-color: #FFFFFF;" href="#" data-style="arctic" title="Arctic"></a> 
     <a style="background-color: #F2F2F2;" href="#" data-style="aristo" title="Aristo"></a> 
     <a style="background-color: #E6E6E6;" href="#" data-style="black-tie" title="Black Tie"></a> 
     <a style="background-color: #CCCCCC;" href="#" data-style="blitzer" title="Blitzer"></a> 
     <a style="background-color: #808080;" href="#" data-style="cobalt" title="Cobalt"></a> 
    </div> 
    <div> 
     <a style="background-color: #FCEE21;" href="#" data-style="flick" title="Flick"></a> 
     <a style="background-color: #D9E021;" href="#" data-style="hot-sneaks" title="Hot Sneaks"></a> 
     <a style="background-color: #8CC63F;" href="#" data-style="humanity" title="Humanity"></a> 
     <a style="background-color: #009245;" href="#" data-style="le-frog" title="Le Frog"></a> 
     <a style="background-color: #006837;" href="#" data-style="midnight" title="Midnight"></a> 
    </div> 

... etc 

</div> 

#hdr_thm { 
    margin: 0; 
    position: absolute; 
    right: 10px; 
    top: 15px; 
    z-index: 20; 
} 

#hdr_thm a { 
    border: 1px solid #050505; 
    cursor: pointer; 
    display: block; 
    float: left; 
    height: 10px; 
    margin: 0; 
    width: 10px; 
} 

ここで何が2つの行を持つことです。各行には5つの<a>要素があります。しかし、問題は 私のためにどのように2番目の5つの正方形が の最初の5つの下に表示されるように行をラップすることができます。 divの左から：

Answer 1

は明確追加してみ

#hdr_thm div { 
    clear:left; 
} 

あなたの元のコードは、クロームに取り組みました。上記のコードでは、IEでも動作します。

Answer 2

2つの行の5つのリンクのそれぞれを正確に整列させたい場合は、実際にはテーブルを使用して最適な解決策になるかもしれません。

それ以外の場合は、内側の2つのdivが互いに相対的に配置されていることを確認してください。問題が解決するはずです。

Answer 3

あなたは

display: inline-block; 

代わりの

が

display: block; 
float: left; 

注使用することができAlternativley：Internet Explorer 6はそれほどあり、値として "インラインブロック" をサポートしていません。あなたは、単純な「インラインを使用することができます"これは、後のバージョンや他のブラウザでもインラインブロックのような動作をします。もちろん、あなたがそれをサポートしたいのであれば。