내 CSS 레이아웃과 혼동

Question

I가 다음

<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) 곡선 모서리가 있고 DIV 안에 들어 있습니다.

많은 조합을 시도했지만 내 큰 문제는 sbr_lnk와 같다고 생각합니다. 배경 DIV로 작동하지 않는 것 같습니다. 도움을 많이 주시면 감사하겠습니다.

는 여기 fiddle 내부 주소 링크 당신은 <a> 태그에 적용된 서식이 너무 많이 가지고있는

Answer 1

의 내부 10px 것 모서리가 둥근 직사각형입니다.

일부 스타일을 래퍼 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/ 일 수도 있습니다. 재사용을 위해 태그에 스타일을 유지하려면 하나의 div에 여러 개의 a가 있어야합니다.