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]





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












-

你可能感兴趣的:(css)