Question

我无法在链接上显示下划线消失。请看看。

<div class="menu">
<ul>
<li><a href="heim.html">lrle</a></li>
<li><a href="sida1.html">rarw</a></li>
<li><a href="sida2.html">de</a></li>
<li><a href="sida3.html">Nignog </a></li>
</ul>
</div>

CSS：

.menu {
width:550px;
height:35px;
font-family:Tahoma,Geneva;
font-size:16px;
text-align:center;
font-weight:bold;
text-shadow:3px 2px 3px #333333;
border-radius:8px;
border: dotted black;
margin-left:auto;
margin-right:auto;
text-decoration: none;
}
.menu ul {
    height: auto;
    padding: 8px 0px;
    margin: 0px;
    list-style-type: none;
    text-decoration: none;
}
.menu li {
display: inline;
padding: 20px;
text-decoration: none;
}

如您所见，我已经尝试在我能想到的每个地方将文本修饰设置为无。

有关如何删除下划线的任何想法？

Answer 1

使用CSS选择器.menu li a来定位锚点

.menu li a{
   text-decoration: none;
}

JS小提琴： http://jsfiddle.net/tGjm5/

Answer 2

你走了：

.menu > ul > li > a {
    display: inline;
    padding: 20px;
    text-decoration: none;
}

Answer 3

以下代码

.menu ul {
   text-decoration: none; 
}

将应用于ul的子级，但不会应用于a超链接。因此，您需要将a标记指定为

.menu ul a {
   text-decoration: none;
}

这将应用于菜单中的链接！

现在看看你的小提琴：http://jsfiddle.net/afzaal_ahmad_zeeshan/DUE39/1/

Answer 4

您需要将.menu li a或精确地放在您需要的地方

下划线不会从链接中消失

4 个答案: