爲什麼ul邊框比表格邊框寬？

爲什麼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>

來源

2010-01-16 uzay95

請發佈html以及css – Ray 2010-01-16 22:30:30

我發佈了（完整的代碼）。 – uzay95 2010-01-16 22:39:02

-1

只是刪除了UI元素的寬度爲100％，並添加右保證金如下：

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

修復了Firefox中的顯示效果，並且適用於其他瀏覽器。

來源

2010-01-16 22:46:50 Thilo

但是ul在桌子上。如果我添加寬度：100％，它將有最大寬度像表不會嗎？你能否說明爲什麼？ – uzay95 2010-01-16 22:51:24

如果指定100％加左邊距和右邊距，則至少在某些瀏覽器中，該邊距加起來超過100％的封閉元素。只有當它不是默認值時才指定100％，因爲它是針對塊級元素（如ul）。 – Thilo 2010-01-17 00:21:42

高度問題的發生是因爲您同時擁有b內容和一個內容浮動 - 這意味着li元素沒有任何實際（意味着：不是浮動）內容。刪除浮動，你應該很好去。

來源

2010-01-16 22:50:07

如果b標籤或li中的任何標籤具有浮動屬性，它們將不屬於li元素？ – uzay95 2010-01-16 22:59:20

浮動標籤屬於li元素，但它們不會將其高度添加到li高度。剛剛找到另一個解決方案 - http://www.quirksmode.org/css/clearing.html - 溢出：汽車的事情。 – 2010-01-16 23:06:32

爲什麼ul邊框比表格邊框寬？

回答

相關問題