CSS:锚不接受高度 [英] CSS: anchor will NOT accept height

问题描述

我已经为此纠结了一个多小时，但我不明白为什么它不起作用.

HTML:

<div class="菜单"><ul><li class="page_item page-item-6"><a href="http://localhost/mysite/blog/">博客</a></li><li class="page_item page-item-4 current_page_item"><a href="http://localhost/mysite/">首页</a></li><li class="page_item page-item-2"><a href="http://localhost/mysite/sample-page/">示例页面</a></li>

CSS:

div#mainmenu { 位置:绝对；顶部:40px；右:0；字体大小:77%；}div#mainmenu div.menu ul,div#mainmenu div.menu ul li,div#mainmenu div.menu ul li a{高度:36px；}div#mainmenu div.menu ul {显示:表；向左飘浮;宽度:700px；表格布局:固定；位置:相对；}div#mainmenu div.menu ul li{显示:表格单元格；填充:0 10px；溢出:隐藏；}div#mainmenu div.menu ul li a{宽度:自动；背景:无；边距:10px 自动；}

解决方案

将 div#mainmenu div.menu ul li a 更改为:

div#mainmenu div.menu ul li a{显示:块；宽度:自动；背景:无；边距:10px 自动；}

a 元素默认是 inline 并且你不能设置内联元素的高度/宽度.

I have been pulling my hair our for over an hour on this and I just can't understand why it's not working.

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

解决方案

Change div#mainmenu div.menu ul li a to this:

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

a elements are inline by default and you cannot set the height / width of inline elements.

这篇关于CSS:锚不接受高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！