链接 div 时删除文本修饰

Question

所以我做了一个div作为一个带有文本的盒子。当我把它放在一个 href="#">标签<它看起来像这样：>

https://i.gyazo.com/8103b9cc1968842e88afa4c4971b64ea.png

我的问题是我无法删除文本下方的行。

我的代码：

.HTML：

<div class="sommersalg">
<div id="prosent">
50%-75%
</div>
<p>SOMMERSALG</p>
<a href="produkter.html">
<div id="handle">
HANDLE NÅ
</div>
</a>
</div>

.CSS

.sommersalg a #handle {
margin: auto;
border-radius: 7.5px;
position: relative;
top: -290px;
color: #586e72;
background-color: white;
font-size: 15px;
width: 250px;
padding: 15px;
text-align: center;
font-family: 'Raleway', sans-serif;
cursor: pointer;
box-shadow: 0px 2px 5px #3686a3;
text-decoration: none;
}
.sommersalg #handle:hover {
top: -289.25px;
box-shadow: 0px 0px 0px #3686a3;
text-decoration: none;
}

Answer 1

您必须将<a>标记设置为text-decoration: none;。不是里面的div。

.sommersalg a #handle {
margin: auto;
border-radius: 7.5px;
position: relative;
top: -290px;
color: #586e72;
background-color: white;
font-size: 15px;
width: 250px;
padding: 15px;
text-align: center;
font-family: 'Raleway', sans-serif;
cursor: pointer;
box-shadow: 0px 2px 5px #3686a3;
text-decoration: none;
}
.sommersalg #handle:hover {
top: -289.25px;
box-shadow: 0px 0px 0px #3686a3;
text-decoration: none;
}
.sommersalg a {
text-decoration: none;
}

<div class="sommersalg">
<div id="prosent">
50%-75%
</div>
<p>SOMMERSALG</p>
<a href="produkter.html">
<div id="handle">
HANDLE NÅ
</div>
</a>
</div>

Answer 2

首先将文本放在一个p标签内，然后在你的CSS文件中使用以下代码：

#handle > p { text-decoration:none;}

代替 p 标签 u 也可以使用 span，到那时你的 CSS 应该是：

#handle > span {text-decoration:none;}

请注意，p 被自然阻塞(意味着它需要整个宽度(，但跨度不是，它只是从宽度中获取它需要的东西！

Answer 3

问题出在元素内部的div 元素上，如此处所述。 您是否添加了 html 文档类型？

"text-decoration： none;"在 .sommersalg a 中是可以的。您不需要添加 ：hover 部分。