與我的CSS佈局困惑

Question

我有以下幾點：

<div id="sbr"> 
    <div id="sbr_bdy"> 
     <div id="sbr_lnk"> 
      <div><a>test</a></div> 
      <div><a>test</a></div> 
      <div><a>test</a></div> 
      <div><a>test</a></div> 
      <div><a>test</a></div> 
      <div><a>test</a></div> 
     </div> 
    </div> 
</div> 

和

#sbr_lnk a { 
    border-bottom: 1px solid #CCCCCC; 
    border-radius: 5px 5px 5px 5px; 
    border-top: 1px solid #FFFFFF; 
    float: left; 
    height: 25px; 
    line-height: 25px; 
    padding-left: 10px; 
    width: 180px; 
} 

#sbr { width: 200px; background-color: pink; } 

#sbr_lnk div { 
    height: 25px; 
    margin-left: 10px; 
    margin-right: 10px; 
    width: 180px; 
    background-color: yellow; 
} 

#sbr_lnk { 
    padding-top: 25px; 
    padding-bottom: 25px; 
    background-color: green; 
} 

我想看到的是：

1）sbr_lnk作爲所有背景內部DIV和As。現在它不是從上到下： 2）sbr_lnk內的DIV在右側和左側有10px的空間 3）As具有彎曲的角並且恰好位於DIV內部。

我已經嘗試了很多組合，但我認爲我的大問題是與sbr_lnk。它似乎沒有作爲背景DIV工作。幫助將不勝感激。

這裏有一個fiddle 內部地址鏈接是帶有圓角的多數民衆贊成在10px的

Answer 1

裏面你有太多的樣式化應用於<a>標籤的矩形。

將一些樣式移動到包裝div，它會看起來像你想要的。

#sbr_lnk div { 
    height: 25px; 
    width: 180px; 
    background-color: yellow; 
    border: 1px solid #ccc; 
    border-radius: 5px; 
    margin: 0 10px; 
} 

See the example here。

Answer 2

也可以這樣做：http://jsfiddle.net/7ttyT/34/爲了保持風格的標籤重用性的緣故，多個a的一個div。