2

我正在显示一些文本，其下方出现一条蓝线

http://jsfiddle.net/mungbeans/CmVsJ/

和这个问题一样

显示带有蓝色下划线的文本，它来自哪里？

对此和其他人的答案说它对 html4 无效，但对 html5 有效。在这种情况下，为什么小提琴会出现这个问题？解决方案是什么？

谢谢

4

5 回答 5

4

它来自你的<a>——因为一切都被包裹在其中。要删除它，只需应用：

a {
    text-decoration: none
}

演示

于 2012-09-06T21:03:22.313 回答
4

这是你的代码

<ul>
  <a href="http://whatever">
    <li id = "header_list">
      <div id = "main_title">title</div>
      <img id = "logo" src="logo.png"/>
    </li>
  </a>
</ul>

div id="main_title" 在锚标签内，这意味着它是一个链接。默认情况下，链接样式具有蓝色下划线。您可以添加 css 样式以删除蓝色下划线：

#main_title {text-decoration: none; color: #000;}

此外，你应该把 li 标签直接放在 ul 之后，因为它需要是一个直接的孩子： 

<ul>
  <li id = "header_list">
    <a href="http://whatever">
      <div id = "main_title">title</div>
      <img id = "logo" src="logo.png"/>
    </a>
  </li>
</ul>
于 2012-09-06T21:04:16.517 回答
2

您只需要更改链接的样式（所有文本都在您的<a>标签内）：

a{text-decoration:none;}
于 2012-09-06T21:04:32.787 回答
2

它在一个<a>标签内，默认情况下将用下划线呈现。通过设置链接更改默认行为text-decoration: none，它应该可以工作。`

于 2012-09-06T21:04:42.460 回答
1

默认情况下，锚标签a有一个text-decoration定义underline。您可以通过简单地将text-decoration: none;属性添加到 CSS 定义来解决此问题。

我还应该指出，您的标记并不完全正确。您的锚点应该在 list-item 内，并且在 inline-block elements 内li包含块元素通常不是一个好主意。diva

这是您的 jsfiddle 的更新版本，以说明我的意思：http: //jsfiddle.net/CmVsJ/2/

于 2012-09-06T21:09:52.083 回答