Question

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

我设法通过引入一个特殊的类来明确删除下划线（示例中的Link2没问题），但我希望将所有菜单样式放在一个地方。

问题是，是否有人可以解释为什么像这样删除deco（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>

非常感谢！

Answer 1

从语义上讲，<div>不应该进入<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;
}

为了让您的整个标记成为链接（而不仅仅是文本），请为您的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 */
}

Answer 2

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

但是，如果您必须使其正常工作，则可以将display: inline-block;添加到div。

a div.menuitem {
    text-decoration: none;
    color: red;
    display: inline-block;
    width:100%;
}
.remove-under {
    text-decoration: none;
}

Answer 3

这里有2个问题：

你不能做这样的事情
```
<a href="#"><div></div></a> 
```
因为a是内联元素。你在这里做的是无效的HTML代码。是这样的：
```
<div><a href="#"></a></div>
```
您尝试在div元素上应用text-decoration：none，并应将其应用于a元素。
```
a {text-decoration:none;}
```

删除嵌套div中的链接下划线

3 个答案: