CSS - li 元素显示在一行____ a 元素没有下横线

程序员文章站 2022-07-08 19:00:04

...

原文链接： http://www.w3schools.com/css/css_navbar.asp

方法一：用于水平导航栏：

    
    /*** li元素显示在一行，常用作导航栏菜单。 **/

    li{ display: inline; }
    

    /*** a 元素无下横线，是菜单中的文字 **/

    a{ text-decoration: none; }

-

CSS - li 元素显示在一行____ a 元素没有下横线

博客分类： css cssliinlinea下横线

方法二：用于竖直侧边菜单：

举例：

<ul>
  <li><a href="default.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>

Now let's remove the bullets and the margins and padding from the list:

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

三、实例：水平导航栏

链接：http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_menu

CSS - li 元素显示在一行____ a 元素没有下横线

博客分类： css cssliinlinea下横线

<!DOCTYPE html>
<html>
<head>
<style>
ul#menu {
    padding: 0;
}

ul#menu li {
    display: inline;
}

ul#menu li a {
    background-color: black;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px 4px 0 0;
}

ul#menu li a:hover {
    background-color: orange;
}
</style>
</head>
<body>

<h2>Horizontal List</h2>

<ul id="menu">
  <li><a href="/html/default.asp">HTML</a></li>
  <li><a href="/css/default.asp">CSS</a></li>
  <li><a href="/js/default.asp">JavaScript</a></li>
  <li><a href="/php/default.asp">PHP</a></li>
</ul>  

</body>
</html>