0

我开始学习html'n'css，但是遇到了一件我无法解释的事情。我有一个 html 文件，它有一个类似于链接的 div（在应用程序中，我正在设置 div 大小并希望整个框像链接一样）。我无法删除 div 中文本的文本下划线装饰（示例中的 Link1 始终带下划线）。选择器应该是“链接元素中的任何 div”，因为链接是红色的，我认为它是正确的。

我设法通过引入一个用于显式删除下划线的特殊类来做到这一点（示例中的 Link2 可以），但我希望将所有菜单样式放在一个地方。

问题是，是否有人可以解释为什么像这样的删除装饰（Link1）不起作用。此外，我想问一下菜单的组织是否是一种好的风格，或者我是否应该重新组织代码，例如：有这个例如：

<a href="index.html" class="menuitem"><div>Blabla</div></a>

和风格：

a.menuitem {...}
a.menuitem div {width:...;}

这是最小（非）工作示例：

    <html>
    <head>
    <style>
            a div.menuitem {
              text-decoration: none;
              color: red;
            }
            .remove-under {
              text-decoration: none;
            }
    </style>

    </head>
    <body>
            <a href="./index.html">
                    <div class="menuitem">Link1</div>
            </a>
            <a href="./index.html" class="remove-under">
                    <div class="menuitem">Link2</div>
            </a>
    </body>
    </html>

非常感谢！

4

3 回答 3

2

从语义上讲 a<div>不应该进入 a <a>。div 标签是块元素，其中锚标签是内联元素 - 块元素永远不应进入内联元素。<span>如果您需要对不同的内联内容进行样式化，请改为使用，但在您的情况下，另外，您可以将一个类添加到<a>效果更好的类中。

这是您的新代码：

<a href="./index.html" class="menuitem">
    Link1
</a>
<a href="./index.html" class="remove-under menuitem">
    Link2
</a>

您可以通过放置一个空格来为一个元素设置多个类，因此 Link2 具有“remove-under”和“menuitem”类

更新您的 CSS 以删除下划线：

.remove-under {
    text-decoration:none;
}

为了让你的整个 a 标签成为一个链接（不仅仅是文本），为你的 menuitem 类添加以下 css：

.menuitem {
    display:block;
    width: 100px; 
    height: 50px; /* or whatever your desired width and height */
    background: red; /* to show that the whole anchor will be link, not just text */
}
于 2012-11-07T14:36:29.183 回答
2

这不是理想的解决方案。您真的不应该将块级元素放入内联元素中。

但是，如果您绝对必须让它工作，您可以添加display: inline-block;到 div。

a div.menuitem {
    text-decoration: none;
    color: red;
    display: inline-block;
    width:100%;
}
.remove-under {
    text-decoration: none;
}
于 2012-11-07T14:37:56.587 回答
0

你在这里有两个问题：

  1. 你不能做这样的事情

    <a href="#"><div></div></a>

    因为 a 是一个内联元素。您在这里所做的是无效的 HTML 代码。像这样做：

    <div><a href="#"></a></div>

  2. 您尝试在 div 元素上应用 text-decoration:none ，并且应该将其应用于 a 元素。

    a {text-decoration:none;}
于 2012-11-07T14:32:15.440 回答