2011-11-09 3 views
0

국경이 너무 넓어지고 숫자에 시작하지 않는 이유를 알아 내려고하고 있습니다.OL Li의 밑에 국경을 두는 방법

http://kansasoutlawwrestling.com/

모형 : 경계가 ul의 폭이 될 것이다되는 li의 폭의 크기가 될 것이다 http://kansasoutlawwrestling.com/assets/images/wrestling2.jpg

<div id="sidebar_left"> 
     <a href="#"><img src="assets/images/ad.png" alt="Spotlight Wrestler"/></a> 
     <div id="top5"> 
      <ol> 
       <li>Joe Smith</li> 
       <li>John Michaels</li> 
       <li>Steve Hart</li> 
       <li>Bret Hogan</li> 
       <li>Undertaker</li> 
      </ol> 
     </div> 
    </div> 

#sidebar_left{width:300px;float:left;} 
#sidebar_left img {} 
#top5 ol li {padding:11px 0 11px 0;border-bottom:solid 1px gray;} 
#top5 ol li:last-child{border:none;} 
+0

모형 링크가 죽었습니다. 편집 : nvm fixed –

+0

국경은 300px입니다. 너비를 너 자신으로 정의했습니다 (조상에서 LI의 너비는 #sidebar_left DIV의 너비와 같습니다). 너는 무엇을 기대 했는가? –

+1

진짜 무법자는 Quirks 모드로갑니다! 진지하게, 당신이 브라우저 호환성 팀의 어색함에 있지 않도록 doctype을 포함하는 것을 고려하고 [유효한 HTML] (http://validator.w3.org/check?uri=http%3A%2F%2Fkansasoutlawwrestling)을 작성하는 것을 고려하십시오. com % 2F). – phihag

답변

4

LI는 링크가됩니까? 텍스트를 링크 또는 스팬으로 만든 다음 해당 요소에 테두리를 넣으십시오. 왼쪽/오른쪽에 패딩을 추가하면 텍스트의 가장자리에 달라 붙지 않습니다. 너는 선들이 모두 같은 너비가되기를 원한다. 부모 너비에 너비를 준다.

내 모형보기 : http://jsfiddle.net/2kJJE/1/

+0

Lis는 링크 텍스트가 아닙니다! 내 모형의 왼쪽에 나타나는 한 연장해야합니다. –

+0

내가 그걸 할 때도 여전히 숫자 밑에 줄을 추가하지 않습니다. –

1

있는 블록 레벨로서 요소가 컨테이너의 내부 폭 (너비 - 패딩)이 될 것입니다.

숫자/글 머리 기호는 list-style-position에 따라 렌더링됩니다. 해당 속성이 outside으로 설정된 경우 li 외부로 렌더링됩니다. 일반적으로 외부 공간은 ol/'ul . If set to inside then they will render inside the li`의 패딩에 포함되지만 텍스트는 일반과 같이 줄 바꿈되므로 각 항목의 콘텐츠는 숫자/글 머리 기호에서 들여 쓰기가되지 않습니다.