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

阅读更多
原文链接: http://www.w3schools.com/css/css_navbar.asp


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


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

    li{ display: inline; }
    

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

    a{ text-decoration: none; }

-



CSS - li 元素显示在一行____ a 元素没有下横线_第1张图片




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


举例:





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 元素没有下横线_第2张图片



三、实例:水平导航栏


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


CSS - li 元素显示在一行____ a 元素没有下横线_第3张图片








Horizontal List










-
  • CSS - li 元素显示在一行____ a 元素没有下横线_第4张图片
  • 大小: 15.8 KB
  • CSS - li 元素显示在一行____ a 元素没有下横线_第5张图片
  • 大小: 5.9 KB
  • CSS - li 元素显示在一行____ a 元素没有下横线_第6张图片
  • 大小: 7.2 KB
  • 查看图片附件

你可能感兴趣的:(css,li,inline,a,下横线)