与我的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。