HTML + CSS:'a'宽度不起作用

Question

HTML + CSS:'a'宽度不起作用

我有以下代码:

CSS部分:

<style type="text/css">
    .menu
    {
        width:200px;
    }

    .menu ul
    {
        list-style-image:none;
        list-style-type:none;
    }

    .menu li
    {
        margin:2px;
    }

    .menu A
    {
        height:25px;
        width:170px;
        background:url(./images/button-51.png);
        padding:2px 5px ;
    }

    .menu A:link
    {
        height:25px;
        width:170px;
        background:url(./images/button-51.png);
        padding:2px 5px ;
    }
</style>

Run Code Online (Sandbox Code Playgroud)

HTML部分:

一切正常,但是当我在HTML文档的开头添加'DOCTYPE'元素时:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Run Code Online (Sandbox Code Playgroud)

不考虑'a'元素的宽度.

问题1:为什么？

问题2:如何解决这个问题？

非常感谢!

Answer 1

Bal*_*usC 109

问题1:为什么？

因为它默认不是块元素.

问题2:如何解决这个问题？

使用display: block;或使用内联块使其成为块元素display: inline-block;.

Answer 2

Abu*_*yah 7

make block for anchor tag添加display:block样式

.menu a
{
    display:block;
    height:25px;
    width:170px;
    background:url(./images/button-51.png);
    padding:2px 5px ;
}

Run Code Online (Sandbox Code Playgroud)

注意:不要重复.menu a:link类中的所有元素..只需添加更改或新样式. 注意:始终在html和css代码中使用小写

归档时间：	14 年，7 月前
查看次数：	43284 次
最近记录：	10 年，9 月前