Question

我尝试使用text-decoration删除下划线：遍布整个地方但是我无法将其删除。

这是我的HTML ...

.dropdown {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 220px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  text-decoration: none;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-decoration: none;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
  text-decoration: none;
}

.dropdown:hover .dropdown-content {
  display: block;
  text-decoration: none;
}

.dropdown:hover .dropimg {
  background-color: #3e8e41;
  text-decoration: none;
}

img.dropimg {
  text-decoration: none;
}

td.table_data.dropdown .image-link {
  text-decoration: none;
}

a:link {
  text-decoration: none!important;
}

a:hover {
  text-decoration: none;
  box-shadow: none;
}

td.table_data.dropdown a.image-link {
  text-decoration: none!important;
}

<td class="table_data dropdown">
  <a class="image-link" href="/somelink"><img class="dropimg" src="img/address_book.png" alt="contact" height="25px" width="25px">
    <div class="dropdown-content">
      <a href="#">Name: Blah</a>
      <a href="#">DoB: Blah2</a>
    </div>
  </a>
</td>

也许我的CSS不够具体，但我不知道从哪里开始。当然，我希望它适用于大多数现代浏览器。我们通常在内部使用IE，Edge，Firefox和Chrome。

任何建议都会受到最高的赞赏;感谢。

Answer 1

将文本修饰设置为标记本身。

Not Found: /blog/post_new/
[26/Jan/2018 19:07:20] "POST /blog/post_new/ HTTP/1.1" 404 10871

您不希望使用li或按钮来嵌套标记。

Answer 2

此解决方案适用于我：

<td class="table_data">
    <a style="text-decoration:none;"
       title="Name: blah1&#10DoB: Blah2&#10"
       href="/some-link/">
        <img class="dropimg" src="{% static "img/address_book.png" %}" alt="contact" height="20px" width="20px">
    </a>
</td>

如何从表中删除img链接下拉列表的下划线？

2 个答案: