Question

html如下：

<ul id="members">
    <li><a id="Chris"><img alt="Chris" src="images/chris.jpg"/></a></li>
    <li><a id="Carlin"><img alt="Carlin" src="images/bass2.jpg"/></a></li>
    <li><a id="Mikael"><img alt="Mikael" src="images/drums.jpg"/></a></li>
    <li><a id="Bert"><img alt="Bert" src="images/keyboard.jpg"/></a></li>
</ul>

我想要实现的是这些图像水平放置，我管理找到但图像有下划线样式。我知道要修复它我需要text-decoration:none某个地方，我试过的css是：

#members { list-style: none; text-decoration: none; float:left; display: inline; }
#members li { list-style: none; text-decoration: none; border: none; float:left; display: inline; margin: 0px 75px 20px 0px; }

如果我将上述css的第二行更改为：

 #members li a img { list-style: none; text-decoration: none; border: none; float:left; display: inline; margin: 0px 75px 20px 0px; }

然后删除下划线，但然后将图像垂直放置在一条线而不是水平放置。

我知道这可能是非常愚蠢的事情，但我无法看到自己造成了什么。

谢谢，

马丁

Answer 1

下划线可能来自包装<a>标记，看看是否有效：

#members li a,
#members li a:visited
{ text-decoration: none; }

a img { outline: none; border: none; }

Answer 2

尝试：

a,
a img {
    text-decoration: none;
    outline: none;
    border: 0px none transparent;
}

上面删除了a和后代img的下划线，轮廓和边框，它没有声明display属性，所以浮点数仍然有用，不过如果您浮动图像，则可能需要在父overflow: hidden;或a元素上声明li。

Answer 3

在同样情况下对我有用的是将其添加到我的css文件的开头：

a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
}

它将删除下划线。

此解决方案来自W3学校的博客。

似乎无法从图像链接中删除下划线样式？

3 个答案: