2010-01-16 3 views
0

왜 ul 테두리가 테이블 테두리보다 넓습니까? ul 높이에 모든 li 요소가 포함되어 있지 않은 이유는 무엇입니까? 당신의 도움이 아주 많이왜 ul 테두리가 테이블 테두리보다 넓습니까?

감사합니다 당신에게 ...

alt text

ul 
    { 
     font-family: Verdana; 
     font-size: 8pt; 
    } 

    ul a 
    { 
     text-decoration: none; 
     color: Black; 
    } 

    ul a:hover 
    { 
     text-decoration: underline; 
    } 

    table 
    { 
     background-color: Transparent; 
     border-collapse: collapse; 
    } 
    table tr td 
    { 
     vertical-align: top; 
     text-align: left; 
     font: Verdana, Geneva, sans-serif; 
     font-size: 12px; 
    } 

    #tblYayinAkisi 
    { 
     border:1px white solid; 
     background-color: #222222; 
     font-family: Verdana; 
     color: #ffffff; 
     vertical-align: middle; 
     font-size: 10pt; 
     width:100%; 
    } 

    #tblYayinAkisi th 
    { 
     background-color: Transparent; 
     background-image: url(../images/bckSiyahGriTram.png); 
     background-repeat: repeat-x; 
     height: 20px; 
     padding-left: 10px; 
    } 

    #tblYayinAkisi td 
    { 
     background-color: #222222; 
    } 

    #tblYayinAkisi td ul 
    { 
     border:1px white solid; 
     width:100%; 
     margin-left: 10px; 
    } 
    #tblYayinAkisi td ul li 
    { 
     clear:both; 
     padding-top: 7px; 
     list-style: none; 
    } 
    #tblYayinAkisi td ul li b 
    { 
     margin-right: 10px; 
     float: left; 
    } 

    #tblYayinAkisi td ul li a 
    { 
     color: #ffffff; 
     float: left; 
    } 

전체 코드 :

<html> 
    <head> 
     <style> 
      body 
      { 
       background-color: Red; 
      } 
      ul 
      { 
       font-family: Verdana; 
       font-size: 8pt; 
      } 
      ul a 
      { 
       text-decoration: none; 
       color: Black; 
      } 
      ul a:hover 
      { 
       text-decoration: underline; 
      } 
      table 
      { 
       background-color: Transparent; 
       border-collapse: collapse; 
      } 
      table tr td 
      { 
       vertical-align: top; 
       text-align: left; 
       font: Verdana, Geneva, sans-serif; 
       font-size: 12px; 
      } 
      #tblYayinAkisi 
      { 
       border: 1px white solid; 
       background-color: #222222; 
       font-family: Verdana; 
       color: #ffffff; 
       vertical-align: middle; 
       font-size: 10pt; 
       width: 100%; 
      } 
      #tblYayinAkisi th 
      { 
       background-color: Transparent; 
       background-image: url(../images/bckSiyahGriTram.png); 
       background-repeat: repeat-x; 
       height: 20px; 
       padding-left: 10px; 
      } 
      #tblYayinAkisi td 
      { 
       background-color: #222222; 
      } 
      #tblYayinAkisi td ul 
      { 
       border: 1px white solid; 
       width: 100%; 
       margin-left: 10px; 
      } 
      #tblYayinAkisi td ul li 
      { 
       clear: both; 
       padding-top: 7px; 
       list-style: none; 
      } 
      #tblYayinAkisi td ul li b 
      { 
       margin-right: 10px; 
       float: left; 
      } 
      #tblYayinAkisi td ul li a 
      { 
       color: #ffffff; 
       float: left; 
      } 
     </style> 
    </head> 
    <body> 
     <table id="tblYayinAkisi"> 
      <tbody> 
       <tr> 
        <th> 
         YABAN'da bugün 
        </th> 
       </tr> 
       <tr> 
        <td> 
         <ul> 
          <li><b>00:00</b><a target="_blank" href="programlar.aspx?id=24">TROFE ODASI</a></li> 
          <li><b>01:00</b><a target="_blank" href="programlar.aspx?id=17">YERLİ YABAN</a></li> 
          <li><b>01:30</b><a target="_blank" href="programlar.aspx?id=16">HEDEF</a></li> 
          <li><b>02:00</b><a target="_blank" href="programlar.aspx?id=28">İZCİ</a></li> 
          <li><b>02:30</b><a target="_blank" href="programlar.aspx?id=4">KUŞLAR</a></li> 
         </ul> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <div style="text-align: center;"> 
          <img src="images/canliYayin.png" /> 
          <img src="images/tumAkis.png" /> 
         </div> 
         <br /> 
        </td> 
       </tr> 
      </tbody> 
     </table> 
    </body> 
    </html> 
+0

CSS와 함께 html을 게시하십시오 – Ray

+0

(전체 코드)를 게시했습니다. – uzay95

답변

-1

그냥 UL 요소에 대한 100 % 폭을 제거하고 권리를 추가 여백 : 예 :

#tblYayinAkisi td ul 
{ 
    border: 1px white solid; 
    margin-left: 10px; 
    margin-right: 10px; 
} 

Firefox에서 디스플레이를 수정하므로 다른 브라우저에서도 작동합니다.

+0

하지만 ul이 테이블에 있습니다. 그리고 너비 : 100 %를 추가하면 테이블 너비와 같은 최대 너비가 생깁니 까? 이유를 설명해 주시겠습니까? – uzay95

+1

왼쪽 및 오른쪽 여백에 100 %를 더한 값을 지정하면 적어도 일부 브라우저에서는 포함 요소의 100 % 이상을 추가합니다. ul과 같은 블록 레벨 요소의 경우와 같이 기본값이 아닌 경우 100 % 만 지정하십시오. – Thilo

1

높이 문제는 b 내용과 내용이 모두 떠 다니기 때문에 발생합니다. 즉, li 요소에는 실제 (의미 : 부동하지 않음) 내용이 없음을 의미합니다. 에서 떠있는 제거하고 당신은 좋은 가야한다.

+0

b 태그 또는 li의 임의의 태그에 부동 속성이 있으면 li 요소에 속하지 않습니까? – uzay95

+1

부동 태그는 li 요소에 속하지만 높이를 li 높이에 추가하지 않습니다. 방금 다른 해결책을 찾았습니다 - http://www.quirksmode.org/css/clearing.html - 오버 플로우 : 자동 문제. –

관련 문제