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

【问题标题】：Removing link uderline in nested div删除嵌套div中的链接下划线
【发布时间】：2012-11-07 22:41:57
【问题描述】：

我开始学习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>

非常感谢！

【问题讨论】：

您确定应该将块级元素放入内联元素中吗？也许你应该把 a 放在 div 里面。
是的，但是只有链接文本像链接一样。我需要整个盒子像这样工作——这是 div 元素的目的。不幸的是，为链接元素设置宽度/高度不起作用..
@JoeM。请参阅下面的答案，但您需要像这样更改.menuitem 的display：display:block; 然后给它一个宽度和高度。

标签： html css

【解决方案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;
}

为了让你的整个 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 */
}

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

你有两个问题：

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

【讨论】：

我试过这个，但只有链接的文本实际上像链接一样工作。我希望整个框都可以点击，这可能吗？（我用div来设置大小，因为给a设置宽度是行不通的）
你可以试试这个：{text-decoration:none;显示：块；宽度：100%；高度：100%;}