Question

我创建了一个包含ul和li代码的菜单，并尝试在所有3个部分中输入css font-style:none，但仍然无法从菜单中取出下划线

<div class=menu>
    <ul>
        <a href="http://www.bettyzhangart.com"><img id=smalllog src="http://images2.webydo.com/31/313624/3958%2f7f54386b-c039-47a9-b2f5-eda78fc87287.png"/></a>
        </li>
        <li><a href="http://bettyzhangart.com/about.html">BIO & CV</a></li>
        <li><a href="http://bettyzhangart.com/gallery.html">FINE ART</a></li>
        <li><a href="http://bettyzhangart.com/contact.html">GRAPHIC DESIGN</a></li>
        <li><a href="http://bettyzhangart.blogspot.ca/" /a>BLOG</li>
        <li><a href=""/a>CONTACT</li>
    </ul>
</div>

ul {
    list-style-type:none;
    margin:0;
    padding:0;
}
li {
    padding:50px 0px 30px 10px;
    display:inline;
    vertical-align: middle;
}
li a {
    padding: 0px 30px 0px 30px;
    text-align:center;
    font-family:'Quicksand', sans-serif;
    font-size: 16px;
    font-style: none;
    color: #8e8e8e;  
}

Answer 1

好的，既然评论有效，我会将其作为答案发布。要在悬停时消除锚标记的正常下划线，请应用以下：

a:hover{
    text-decoration:none;
}

这对您有用。因为font-style用于其他事情，比如倾斜，普通等等。

Answer 2

下划线是“a”（链接标记或锚点）的属性text-decoration的值。



li a {
         ...your styles
         text-decoration: none;
     }

li a { ...your styles text-decoration: none; } 可用选项包括无，下划线，上划线，直通，继承（来自父母）和一些浏览器支持blink，你永远不应该使用它，因为它很烦人，并被列为一个笑话。

这是html4标签的默认样式列表 - http://www.w3.org/TR/CSS2/sample.html - 这些是最常用的。当然“a”就在那里：链接，但这是另一个问题的答案。

li菜单下划线样式不会消失

2 个答案: