链接 div 时删除文本装饰答案

【问题标题】：Remove text decoration when div is linked链接 div 时删除文本装饰
【发布时间】：2017-08-12 19:26:19
【问题描述】：

所以我制作了一个 div 作为一个带有文本的框。当我然后把它放在标记中时，它看起来像这样：

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;
}

【问题讨论】：

显示完整的代码，而不只是其中的一部分......
更新问题，不要在评论中添加。
本机行为是在链接下划线，而不是#handle。使用.sommersalg a:hover 作为选择器而不是jsfiddle.net/awzh91yv/3
好的，现在当我将鼠标悬停在它上面时它可以工作，但是当我没有悬停在它上面时如何删除线@baao
添加.sommersalg a { text-decoration: none; }

标签： html css

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

【讨论】：

【解决方案2】：

首先将文本放在 p 标记中，然后在 CSS 文件中使用此代码：

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

你也可以使用 span 而不是 p 标签，到那时你的 css 应该是：

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

请注意 p 被自然阻挡（意味着它占用整个宽度）但 span 不是，它只是从宽度中获取它需要的任何东西！

【讨论】：

是否可以在 p 标签中使用 id 或 class？我的代码中已经有 p..
是的，你可以同时使用它们

【解决方案3】：

问题在于元素内部的 div 元素，如 here 所述。是否添加了 html 文档类型？

“文本装饰：无；”在 .sommersalg a 中没问题。您不需要添加 :hover 部分。

【讨论】：