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

最新推荐文章于 2022-03-02 21:32:46 发布

iteye_3352

最新推荐文章于 2022-03-02 21:32:46 发布

阅读量1.6k

点赞数

分类专栏： css 文章标签： css li inline a 下横线

本文链接：https://blog.csdn.net/iteye_3352/article/details/82652670

版权

css 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

原文链接： [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]


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

[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]


<!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>

iteye_3352

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
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][code="javascript"]...
复制链接

扫一扫