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

Question

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

49

我有以下代码：

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>

HTML部分：

一切运作良好，但当我在HTML文档开头添加了“DOCTYPE”元素时：

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

'a'元素的宽度没有被考虑在内。

问题1：为什么？

问题2：如何修复？

非常感谢！

- Budda

7个回答

10

将锚标签变成块级元素，只需在样式中添加display:block即可。

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

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

- Abudayah

3

在a标签中添加"display:block"。

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

- shankhan

3

这对我有效，但是由于我想让所有链接都在同一行上，所以我使用了display: inline-block;。

- schwechel

2

CSS主要是关于点的问题。属性根据这个点来占用位置。可以查看Google大学对此的看法。这将有助于更好地理解基础知识和一些进阶内容。

- ChuckJHardy

链接不再维护。 - achecopar

2

默认情况下，链接是内联元素；添加 display: block; 就会使用设置的宽度。

- Alec

0

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

- Bakul Sinha

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BalusC · Accepted Answer

问题 1：为什么？

因为默认情况下它不是块级元素。

问题 2：如何修复？

使用 display: block; 将其变为块级元素，或使用 display: inline-block; 将其变为内联块级元素。