10

私はこれで1時間以上髪を引っ張っていますが、なぜ機能しないのか理解できません.

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;
}

ここに画像の説明を入力

4

3 に答える 3

21

これに変更div#mainmenu div.menu ul li aします。

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

a要素はinlineデフォルトであり、インライン要素の高さ/幅を設定することはできません。

于 2012-04-27T21:09:59.540 に答える
6

リンクのデフォルトの表示タイプはインラインで、高さや幅に反応しません。代わりに、リンクをインライン ブロックにするように指示します。これにより、リンクの流れは維持されますが、特定のサイズ (高さ) であるという要求が尊重されます。

div#mainmenu div.menu ul li a
{
    display:inline-block;
    height:36px;
}
于 2012-04-27T21:13:09.720 に答える
5

高さの代わりに行の高さを試してください:

line-height:36px

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

于 2012-04-27T21:10:14.070 に答える