如何覆蓋繼承的維度？

如何防止元素繼承父元素的維度？例HTML如何覆蓋繼承的維度？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>Problem</title> 
     <style type="text/css"> 
      .main li a { 
       height: 80px; 
       width: 150px; 
       background: #ff00ff; 
       margin-bottom: 1px; 
       display: block; 
      } 
      .sub li a { 
       display: block; 
       background: #00ff00; 
      }   
     </style> 
    </head> 

    <body> 
     <div> 
      <ul class="main"> 
       <li> 
        <a>Item 1</a> 
        <ul class="sub"> 
         <li><a>Subitem 1 - this should not inherit height of 80px</a></li> 
         <li><a>Subitem 2 - this should not inherit height of 80px</a></li> 
        </ul> 
       </li> 
       <li><a>Item 2</a></li>    
      </ul> 
     </div> 
    </body> 
    </html>

的.SUB裏被繼承。主要李一的寬度和高度，我不知道爲什麼。我必須設置外部li的寬度和高度，但內部li應該根據需要設置寬度和高度。例如，我可以通過使用float：none來取消繼承的float，但我不知道如何重置指定的維度，以便它們不適用於子元素。

來源

2010-11-22 A-OK

我假設你li s爲display: block元素？在這種情況下，他們並不真的繼承父項的寬度，但它們默認爲width: 100%。

我不認爲你會得到周圍設置一個明確的寬度在這種情況下，內li。

來源

2010-11-22 22:29:22

我已經做了一個小例子，所以你可以看到有什麼問題。我已經定義了.main li a的高度，但我不明白爲什麼.sub li a會繼承它的任何一個！ – 2010-11-22 22:48:19

那不是繼承。選擇.main li a適用與main類元素中同樣以的li內的所有a標籤。你所要求的是這個規則不適用。三點建議。

選項1：更改第一個CSS選擇器：

.main li > a

這意味着「只是一個標籤，其是li的直接子」。但是，在舊版瀏覽器上支持這種語法並不好。

選項2：添加「height：auto;」到.sub CSS規則。再次，這將在較新的瀏覽器上工作，但舊版瀏覽器不一定能正確實現。

方案三：一類添加到第一a標籤，並改變第一CSS選擇器

.main li a.yourClass

這可以防止高度和申請沒有任何a標籤的其他規則班上。這在所有瀏覽器中都能正常工作，甚至可怕的是舊的瀏覽器。

來源

2010-11-22 22:57:47 grahamparks

如何覆蓋繼承的維度？

回答

相關問題