欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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;
}



CSS - li 元素显示在一行____ a 元素没有下横线
            
    
    博客分类: css cssliinlinea下横线 



三、实例:水平导航栏


链接: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>











-
  • CSS - li 元素显示在一行____ a 元素没有下横线
            
    
    博客分类: css cssliinlinea下横线 
  • 大小: 15.8 KB
  • CSS - li 元素显示在一行____ a 元素没有下横线
            
    
    博客分类: css cssliinlinea下横线 
  • 大小: 5.9 KB
  • CSS - li 元素显示在一行____ a 元素没有下横线
            
    
    博客分类: css cssliinlinea下横线 
  • 大小: 7.2 KB