CSS：錨不會接受高度

我一直拉我的頭髮我們在這一個多小時，我只是不明白爲什麼它不工作。CSS：錨不會接受高度

HTML：

<div id="mainmenu"> 
    <div class="menu"> 
     <ul> 
      <li class="page_item page-item-6"><a href="http://localhost/mysite/blog/">Blog</a></li> 
      <li class="page_item page-item-4 current_page_item"><a href="http://localhost/mysite/">Front Page</a></li> 
      <li class="page_item page-item-2"><a href="http://localhost/mysite/sample-page/">Sample Page</a></li> 
     </ul> 
    </div> 
</div>

CSS：

div#mainmenu { position: absolute; top: 40px; right: 0; font-size: 77%; } 
div#mainmenu div.menu ul, 
div#mainmenu div.menu ul li, 
div#mainmenu div.menu ul li a 
{ 
    height: 36px; 
} 
div#mainmenu div.menu ul { 
    display: table; 
    float: left; 
    width: 700px; 
    table-layout: fixed; 

    position: relative; 
} 
div#mainmenu div.menu ul li 
{ 
    display: table-cell; 
    padding: 0 10px; 
    overflow: hidden; 
} 
div#mainmenu div.menu ul li a 
{ 
    width: auto; 
    background: none; 
    margin: 10px auto; 
}

enter image description here

來源

2012-04-27 dcolumbus

變化div#mainmenu div.menu ul li a這樣：

div#mainmenu div.menu ul li a 
{ 
    display: block; 
    width: auto; 
    background: none; 
    margin: 10px auto; 
}

a元素s默認爲inline，您不能設置內聯元素的高度/寬度。

來源

2012-04-27 21:09:59

'inline-block'可能會更合適，但這絕對是一種選擇。 – AlienWebguy 2012-04-27 21:12:45

就是這樣。現在殺了我。 – dcolumbus 2012-04-27 21:36:20

嘗試線高度的高度，而不是：

line-height:36px

http://jsfiddle.net/AlienWebguy/dP4F9/

來源

2012-04-27 21:10:14 AlienWebguy

很高興看到這個簡單的例子。像3行。 – 2014-11-28 22:23:11

這就是爲什麼有一個JSFiddle鏈接的例子。 – AlienWebguy 2014-11-29 21:30:59

好的。 http://jsfiddle.net/dP4F9/28/ – 2014-11-30 20:36:22

默認顯示類型中的鏈接是內聯的，其不與高度或寬度響應。相反，告訴你的鏈接是內聯塊，它保留了鏈接的流動，但是讓他們尊重你的請求是一個特定的大小（高度）。

div#mainmenu div.menu ul li a 
{ 
    display:inline-block; 
    height:36px; 
}

來源

2012-04-27 21:13:09 jarrad

CSS：錨不會接受高度

回答

相關問題