水平菜單欄中列表下的錨標記及其阻止行爲

我是相當新的CSS。我一直在研究如何通過給定的例子來搭建CSS的水平菜單。 html源代碼如下：水平菜單欄中列表下的錨標記及其阻止行爲

<ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Products</a></li> 
     <li><a href="#">Services</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul>

樣式表如下。

body { 
     background-color: #000; 
    } 

    * { 
     margin: 0; 
     padding: 0; 
    } 

    ul { 
     list-style-type: none; 
     background-image: url(navi_bg.png); 
     height: 80px; 
     width: 663px; 
     margin: auto; 
    } 

    li { 
     float: left; 
    } 

    ul a { 
     background-image: url(navi_bg_divider.png); 
     background-repeat: no-repeat; 
     background-position: right; 
     padding-right: 32px; 
     padding-left: 32px; 
     display: block; 
     line-height: 80px; 
     text-decoration: none; 
     font-family: Georgia, "Times New Roman", Times, serif; 
     font-size: 21px; 
     color: #371C1C; 
    } 

    ul a:hover { 
     color: #FFF; 
    }

所有這些代碼完美地顯示水平菜單，但我不太瞭解它是如何組織的。

我的問題是：爲什麼我們需要將<li>標記中包含的錨的display屬性設置爲「block」？我知道錨標籤本身就是內聯元素。這是否意味着這樣做可以讓錨點標記顯示爲塊？那麼，我們可以將它們作爲塊來設置背景和填充？

任何幫助將非常感激。

來源

2011-12-10 Sarun Sermsuwan

添加display:block到<a>元素不是mendatory，但它的一個好處是，如果你指定一個（特別是高度），它會拿他的父母（<li>）的全尺寸。

此外，由於您正在將鏈接應用於鏈接，因此大多數情況下需要指定高度，因此將其顯示爲塊總是件好事。

來源

2011-12-10 14:53:02 allaire

水平菜單欄中列表下的錨標記及其阻止行爲

回答

相關問題