导航栏中带有“|”，如何用html和css来编写？

废话不多说，直接开始正题吧

文章目录

一、分析导航栏

二、如何 *** 作

1、第一种情况（内容和“|”）

2、第二种情况（内容和边框）

总结

---

一、分析导航栏

参考如下导航栏：

类似这样的一个导航栏该如何编写？

由于只是编写导航栏的样式，因此不进行设置鼠标悬停上去的效果，不涉及标签的使用

分析：这个导航栏可以利用ul li标签来进行编写，当然也可以选择div p标签等，但是为了方便起见，使用ul li是相对好一些的方式，也便于修改。

          从图中可以看出这个导航栏可以被划分为4个部分，每一个部分可以被分为1、内容和“|”    2、内容和边框。

       先分析第一种情况（内容和“|”）：a.内容和“|”,内容区域可以用ul li来包裹 ，而“|”可以用span标签来进行包裹。

b. 内容区域用ul li span标签包裹，“|”直接放在li标签中也可以。

      第二种情况（内容和边框）：内容用ul li来包裹，而边框设置边框样式即可。

二、如何 *** 作 1、第一种情况（内容和“|”）

a.内容和“|”,内容区域可以用ul li来包裹 ，而“|”可以用span标签来进行包裹。

html代码如下：

                

                    
网站地图|
                    
联系我们 |
                    
关注关注|
                    
采购系统入口
                

css代码如下： 

      *{
            margin:0;
            padding: 0;
        }
        ul{
            width: 600px;
            height: 50px;
            background-color: yellow;
        }
        ul li{
            list-style: none;
            float: left;
            background-color: pink;
            line-height: 50px;
            text-align: center;
        }
        ul li span{
            padding:0 49px;
        }

浏览器显示的结果为：

 这样写会出现，文字不能够居中显示，因此span包裹“|”不可取。

b. 内容区域用ul li span标签包裹，“|”直接放在li标签中也可以。

html代码如下：

    

        
网站地图|
        
联系我们|
        
关注关注|
        
采购系统入口
    

css代码如下：

      *{
            margin:0;
            padding: 0;
        }
        ul{
            list-style: none;
            width: 597px;
            height: 50px;
            background-color: yellow;
        }
        ul li{
            float:left;
        }
        ul li span{
            display: inline-block;
            background-color: pink;
            line-height: 50px;
            padding:0 37px;
        }

 浏览器显示的结果为：

这种方式，可以让每一个内容中的文字居中显示，在css样式中span转换成了行内块元素，这是span是行内元素，不能够设置宽高，给它转为行内块元素就可以设置宽高了。

2、第二种情况（内容和边框）

html代码如下：

    

        
网站地图
        
网站地图
        
网站地图 
        
采购系统入口
    

 css代码如下：

      *{
            margin:0;
            padding: 0;
        }
        ul{
            list-style: none;
            width: 596px;
            height: 50px;
            background-color: yellow;
        }
        ul li{
            float:left;
            height: 50px;
          line-height: 50px;
        }
        ul li .span4{
            border-right:0px;
        }
        ul li span{
            padding:0 38px;
            background-color: pink;
            border-right:1px solid gray;
        }

浏览器效果如下：

这种方式可以让内容居中以及让边框大小与文字大小一致，也可取。

在css样式中，设置边框时，要注意对象是谁，是给span中设置边框，可以实现边框与文字一样大小，然后给li设置行高，可以实现文字垂直方向居中。

如果给li设置边框，那么边框会占满整个高度的大小，出来的效果就不正确了 。

 

---

总结

可以利用内容区域用ul li span标签包裹，“|”直接放在li标签中或者内容+边框的方式来设置导航栏带有|的效果。