删除嵌套div中的链接uderline

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

我设法通过引入一个特殊的类来显式移除下划线（示例中的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>

非常感谢！

来源

2012-11-07 Joe M.

你确定你应该把一个块级元素放入一个内联块吗？也许你应该把它放在div的内部。 –

是的，但只有链接文本就像链接一样。我需要整个盒子像这样工作 - 这是div元素的目的。不幸的是，设置链接元素的宽度/高度不起作用。 –

@JoeM。看到我的答案在下面，但你需要像这样改变'.menuitem'的'display'：'display：block;'然后给它一个宽度和高度。 – Andy

语义上讲一个<div>不应该的<a>往里走。 div标签是块元素，其中的锚标签是内联元素 - 块元素不应进入内联元素。如果你需要设计不同的内联但你的情况下使用<span>，另外，你可以添加一个类到<a>这会更好。

这是你的新代码：

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

您可以通过将一个空间有多个类的元素，因而链路2具有类“中删除，不满”，“菜单项”

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

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

为了得到你的整个标签是一个链接（不只是文本）增加以下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-07 14:36:29 Andy

太好了，谢谢，这就是它！ –

你有2个问题在这里：

你不能做这样的事情
```
<a href="#"><div></div></a> 
```
，因为是一个内联元素。你在这里做的是一个无效的HTML代码。像这样做：
```
<div><a href="#"></a></div> 
```
你尝试运用文字修饰：无div元素上，你应该把它应用到一个元素。
```
a {text-decoration:none;} 
```

来源

2012-11-07 14:32:15 sticksu

我试过这个，但是只有链接的文本实际上像链接一样工作。我希望整个盒子可以点击，这可能吗？（我使用div设置大小，因为设置宽度不起作用） –

您可以试试这个：{text-decoration：none;显示：块;宽度：100％;身高：100％;} – sticksu

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

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

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

来源

2012-11-07 14:37:56 techfoobar

删除嵌套div中的链接uderline

回答

相关问题