LI元素內部的填充

我無法在我的<li>標記中使用填充屬性。LI元素內部的填充

這是我的CSS：

.menu li{ 
    height:50px; 
    display: inline; 
    padding:10px 15px 18px 15px; 
    border-style: solid; 
    border-width: 0px 2px; 
    -moz-border-image: url(../img/menuborder.png) 0 2 stretch repeat; 
    -webkit-border-image: url(../img/menuborder.png) 0 2 stretch repeat; 
    -o-border-image: url(../img/menuborder.png) 0 2 stretch repeat; 
    border-image: url(../img/menuborder.png) 0 2 stretch repeat; 
    border-right:0; 
} 

.menu a{ 
    color:#fff; 
    text-decoration: none; 
    padding-top:10px; 
}

這裏是我的.HTML：

<ul class="menu"> 
     <li><a href="#">Dashboard</a></li> 
     <li><a href="#">Incentives</a></li> 
     <li><a href="#">Forum</a></li> 
     <li><a href="#">Forum</a></li> 
     <li class="last"><a href="#">Help</a></li> 
    </ul>

然而，填充頂似乎並沒有影響到一中的文本和li標籤。

我在做什麼錯？

謝謝。

來源

2012-10-22 oliverbj

您可能需要將填充應用於a元素。你將需要作出對於頂部/底部填充一個塊級元素的工作：

.menu a { 
    color: #fff; 
    display: inline-block; 
    text-decoration: none; 
    padding: 10px 15px 18px 15px; 
}

注：inline-block僅部分支持IE7及以下。如果上述操作無法按預期工作，則可以使用display: block;和float:left。

還必須提到的是，這裏的基礎的問題是你的li S IN的CSS的display:inline，與事實a標籤inline默認。您不能將頂部/底部填充應用於inline元素。

來源

2012-10-22 20:57:20

關於不支持內聯塊的瀏覽器的注意事項; –

爲什麼要使用錨標籤而不是'li'元素？ –

@頭，主要是B/C我這樣做，並知道它的工作原理W/O測試。還因爲它增加了每個菜單鏈接的「可點擊區域」。 –

填充將無法正常工作的

display: inline;

嘗試

display: block;

，而是和可選

float: left;

來源

2012-10-22 20:56:34 LorDex

雖然你是對的，爲什麼不顯示：inline-block;'？ –

內聯塊也是一個選項。只需要記住，如果html中的標籤將與任何東西（char，space，甚至是換行符）分開，那麼inline-blocked元素之間的間距將會很小。爲了避免它，你需要設置font-size：0;到容器，然後當然字體大小爲內聯阻止的元素 – LorDex

.menu li a{color:#fff;text-decoration: none;padding-top:10px;}

這將添加填充到列表中的項目本身。你需要給造型到

.menu

本身爲了所有其他填充（左，右）添加到列表項的塊。

來源

2012-10-22 20:56:38

您也可以嘗試爲a設置line-height匹配li的高度，像這樣：

.menu a{ 
    color: #000; 
    text-decoration: none; 
    line-height: 50px; 
}

演示在這裏：http://jsfiddle.net/9TcRP/

來源

2012-10-22 21:01:10 Bogdan

你也許能夠給你立一個類名和嘗試你的風格，爲那個班。

來源

2012-10-22 21:02:55

你想要菜單上的頂部填充。不是錨點或列表元素。

.menu {padding-top: 10px;}

來源

2012-10-22 21:03:15 DaveyLaser

LI元素內部的填充

回答

相關問題