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

原文链接： [url=http://www.w3schools.com/css/css_navbar.asp]http://www.w3schools.com/css/css_navbar.asp[/url]


[color=indigo][size=x-large][b]方法一： 用于水平导航栏： [/b][/size][/color]

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

    li{ display: inline; }


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

    a{ text-decoration: none; }

-

[img]http://dl2.iteye.com/upload/attachment/0117/7190/e62b74cc-0219-385b-be3f-53ac310e49b3.png[/img]


[color=indigo][size=x-large][b]方法二： 用于竖直侧边菜单：[/b][/size][/color]


[b]举例：[/b]

  
Home
  
News
  
Contact
  
About

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

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

[img]http://dl2.iteye.com/upload/attachment/0117/7192/a3c6d36e-8bcd-32f3-b0c8-6fc03bb11022.png[/img]


[color=indigo][size=x-large][b]三、实例：水平导航栏[/b][/size][/color]


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


[img]http://dl2.iteye.com/upload/attachment/0117/7194/297c596d-e934-3615-bd5a-a8629a1cfc85.png[/img]

Horizontal List


  
HTML
  
CSS
  
JavaScript
  
PHP
  

-