ul li 를 쓸 경우 border나 background가 사라져 버린다.
공통인 CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
#test h3 { margin:0; } #test ul { list-style:none; margin:; padding:0; } #test li { background:url(../images/test.gif) no-repeat left; padding-left:10px; border-bottom:1px solid #E5E5E5; line-height:220%; } |
원래썼던 코드
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div id="test"> <h3>Title</h3> <ul> <li><a href="#">item</a></li> <li><a href="#">item</a></li> <li><a href="#">item</a></li> <li><a href="#">item</a></li> </ul> <h3>Title</h3> <ul> <li><a href="#">item</a></li> <li><a href="#">item</a></li> <li><a href="#">item</a></li> <li><a href="#">item</a></li> </ul> </div> |
문제 발생으로 인해 야메로 고쳐쓴 코드
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div id="test"> <ul> <h3>Title</h3> <li><a href="#">item</a></li> <li><a href="#">item</a></li> <li><a href="#">item</a></li> <li><a href="#">item</a></li> </ul> <ul> <h3>Title</h3> <li><a href="#">item</a></li> <li><a href="#">item</a></li> <li><a href="#">item</a></li> <li><a href="#">item</a></li> </ul> </div> |
원인을 아시는 분은 댓글로 가르침을 주시길 바라오…
일몰님의 도움
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div> <ul> <li> <h3>Title</h3> <ul> <li>item</li> <li></li> </ul> </li> </ul> </div> |