使用html和css制作水平导航栏nav

小鱼儿 2022-07-20 16:22 245阅读 0赞

使用html和css制作水平导航栏nav的方法及其效果：  
**1、li设置float:left;**  
（1）代码片段：

...
        <style>
            *{
                margin:0;
                padding:0;
            }
            ul{
                list-style-type:none;
                margin:100px 50px;/*margin:100px auto无效,不能使ul左右居中*/
                text-align:center;
                font-size:14px;
            }
            li{
                float:left;/*改动的地方*/
                width:80px;
                padding:10px;
                background-color:#ff9137;
            }
            a:link,a:visited,a:hover,a:active{
                color:#fff;
                text-decoration:none;
            }
            a{
                display:block;/*整体变为可点击区域，而不只是字*/
            }
        </style>
    </head>
    <body>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </body>
    ...

（2）呈现效果：  
![li\{float:left;\}][li_float_left]  
（3）备注：  
①可对ul设置margin，但是设置为margin:100px auto时无法让ul居中  
②ul所占高度为0。  
③可对li设置width，自由调节宽度。  
④可对li设置margin，使li之间有空白。  
⑤可对a设置display:block；使整体变成可点击区域。  
⑥如果想让链接有相同的大小，就必须用浮动，不能用display:inline;

**2、li设置display:inline-block;**  
（1）代码片段：

...
    <style>
            *{
                margin:0;
                padding:0;
            }
            ul{
                list-style-type:none;
                margin:100px;
                text-align:center;
                font-size:14px;
            }
            li{
                display:inline-block;/*改动的地方*/
                width:80px;
                padding:10px;
                background-color:#ff9137;
            }
            a:link,a:visited,a:hover,a:active{
                color:#fff;
                text-decoration:none;
            }
            a{
                display:block;
            }
        </style>
    </head>
    <body>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </body>
    ...

（2）呈现效果：  
![li\{display:inline-block;\}][li_display_inline-block]  
（3）备注：  
①对ul设置margin:100px auto；可让ul左右居中。  
②即使li没有margin，各个li之间还是会有空白。  
（aSuncat-20190809：可对父元素font-size设置0，子元素font-size设置成正常的，来消除空白）  
③可对a设置display:block;使整体变成可点击区域。

**3、li设置display:inline;**  
（1）代码片段：

...
        <style>
            *{
                margin:0;
                padding:0;
            }
            ul{
                list-style-type:none;
                margin:100px;/*margin:100px auto;可让ul左右居中*/
                text-align:center;
                font-size:50px;
            }
            li{
                display:inline;/*改动的地方*/
                padding:10px;
                background-color:#ff9137;
            }
            a:link,a:visited,a:hover,a:active{
                color:#fff;
                text-decoration:none;
            }
        </style>
    </head>
    <body>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </body>
    ...

（2）呈现效果：  
![li\{display:inline\}][li_display_inline]  
（3）备注：  
①可对ul设置margin：100px auto，可使ul左右居中。  
②即使li没有margin，各个li之间还是会有空白。  
③不能对li设置width，即无法限定宽度。  
④不能对a设置display:block;a会溢出，达不到我们想到的效果。  
呈现效果如下：  
![a\{display:block\}的效果][a_display_block]

**4、li设置position:absolute;**  
（1）代码片段：

...
        <style>
            *{
                margin:0;
                padding:0;
            }
            ul{
                list-style-type:none;
                margin:100px 50px;
                text-align:center;
                font-size:14px;
                position:relative;
            }
            li{
                position:absolute;/*改动的地方*/
                top:0;
                width:80px;
                padding:10px;
                background-color:#ff9137;
    
            }
            .li1{
               left:0;
            }
            .li2{
                left:80px;
            }
            .li3{
                left:160px;
            }
            .li4{
                left:240px;
            }
            a:link,a:visited,a:hover,a:active{
                color:#fff;
                text-decoration:none;
            }
            a{
                display:block;/*整体变为可点击区域，而不只是字*/
            }
        </style>
    </head>
    <body>
    <ul>
        <li class="li1"><a href="#">Home</a></li>
        <li class="li2"><a href="#">News</a></li>
        <li class="li3"><a href="#">Contact</a></li>
        <li class="li4"><a href="#">About</a></li>
    </ul>
    </body>
    ...

（2）呈现效果：  
![li\{position:absolute;\}][li_position_absolute]  
（3）备注：  
①对ul设置position:relative，便于对li设置position;  
②对li设置position:absolute; top:0;  
③对不同li设置left ;这样可以让li在不同的位置显示出来，而不是全部堆叠在一起。  
④最不推荐这种方法，得给每个li一个left，比较麻烦。

总结：个人比较喜欢用float:left;①各个li的宽度以及li之间的距离都可以自己设置，灵活性更高。②可对a设置display:block;使整体变成可点击区域，而不只是字可以点击。

[li_float_left]: /images/20220720/1c0c52dc5c404ec695b78c005beb02a9.png
[li_display_inline-block]: /images/20220720/4a5c87c58055404491344106e0e9e567.png
[li_display_inline]: /images/20220720/c873677671ff4521aca63fee978bcc4d.png
[a_display_block]: /images/20220720/1a7e9b90da364ef19280e30c13d9170b.png
[li_position_absolute]: /images/20220720/b3f4f57f7d3f46ef98d6a1f75aa55326.png