重複を止めるためにDIVをどのように配置することができますか？

Question

私は一日以上作業して、いくつかのDIVを正しく表示しようとしています。今私はそこに半分ですが、私はまだ間隔の問題があります。私はfiddleを作成しました。問題は、ボタンが重なっていることです。

誰でもこれに関するいくつかのアドバイスを提供できますか？私はどのようにボタンの行の間にスペースを置くことができるのか分かりません。

<div class="sbr_bdy"> 
    <div class="sbr_qu"> 
    <div><a class="qu" href="1" title="Go to queue 1" >1</a></div> 
    <div><a class="qu" href="2" title="Go to queue 2" >2</a></div> 
    <div><a class="qu" href="3" title="Go to queue 3" >3</a></div> 
    <div><a class="qu" href="1" title="Go to queue 1" >1</a></div> 
    <div><a class="qu" href="2" title="Go to queue 2" >2</a></div> 
    <div><a class="qu" href="3" title="Go to queue 3" >3</a></div> 
    <div><a class="qu" href="1" title="Go to queue 1" >1</a></div> 
    <div><a class="qu" href="2" title="Go to queue 2" >2</a></div> 
    <div><a class="qu" href="3" title="Go to queue 3" >3</a></div> 
    <div><a class="qu" href="1" title="Go to queue 1" >1</a></div> 
    <div><a class="qu" href="2" title="Go to queue 2" >2</a></div> 
    <div><a class="qu" href="3" title="Go to queue 3" >3</a></div> 
    <div><a class="qu" href="1" title="Go to queue 1" >1</a></div> 
    <div><a class="qu" href="2" title="Go to queue 2" >2</a></div> 
    <div><a class="qu" href="3" title="Go to queue 3" >3</a></div> 
    </div> 
</div> 

.sbr_bdy { padding:0px 15px; xoverflow: hidden;} 
.sbr_bdy { background: #666699; } 
.sbr_qu { background: #336699; 
    xpadding-bottom:2px; display:inline; float: left; } 
.sbr_qu div {  float: left; padding:5px; 
          -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; } 

.sbr_qu a { padding:15px; color:blue; text-decoration: none; 
    border: 2px solid #666; 
    background: #ddd; 
    xpadding: 2px; 
    xmargin: 1px; 
    color: #000; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
    cursor: pointer; 
} 

Answer 1

あなたのA要素はDIVのより大きなあるという理由だけです。ここで

は、私が持っているコードです。 float：leftをA要素に追加するだけで、DIVの高さを定義することができます。

http://jsfiddle.net/78Uhk/1/

Answer 2

私はそれを編集しました。 1つはその原油を言うかもしれません。しかし、CLICK HERE

意図的に入力した場合に備えて、 "xoverflow"または "xmargin"または "xpadding"というCSS属性はありません。

Answer 3

コードでオフターゲットとなるものがかなりあるように見えるので、私はそれをたくさんクリーンアップしました。 [Here is a fiddle]私はあなたが得ようとしていると思っているものの非常にクリーンアップ版と。以下は作業コードです。

（OR楽しみのためだけに、それを掃除した後、私はロールオーバーがエッジを丸め/ wはそれを少し微調整...等あなたはそれを願っています;）["Extra" example here]

HTML：

<div class="sbr_qu"> 
    <a href="1" title="Go to queue 1" >1</a> 
    <a href="2" title="Go to queue 2" >2</a> 
    <a href="3" title="Go to queue 3" >3</a> 
    <a href="1" title="Go to queue 1" >1</a> 
    <a href="2" title="Go to queue 2" >2</a> 
    <a href="3" title="Go to queue 3" >3</a> 
    <a href="1" title="Go to queue 1" >1</a> 
    <a href="2" title="Go to queue 2" >2</a> 
    <a href="3" title="Go to queue 3" >3</a> 
    <a href="1" title="Go to queue 1" >1</a> 
    <a href="2" title="Go to queue 2" >2</a> 
    <a href="3" title="Go to queue 3" >3</a> 
    <a href="1" title="Go to queue 1" >1</a> 
    <a href="2" title="Go to queue 2" >2</a> 
    <a href="3" title="Go to queue 3" >3</a> 
    <div id="anything"></div> 
</div> 

CSS ：

.sbr_qu { 
    background-color: #336699; 
    padding: 2px; 
    } 
.sbr_qu a { 
    float: left; 
    padding:15px; 
    text-decoration: none; 
    border: 2px solid #666; 
    background-color: #ddd; 
    margin: 2px; 
    color: #000; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
    } 
#anything { clear: both; }