前端导航栏标签中间的小竖线 实现方法

Posted 好好余额

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端导航栏标签中间的小竖线 实现方法相关的知识,希望对你有一定的参考价值。

此方法在可控性方面比较占优势但是会增加一个竖线的节点

html部分:

<div class="top_page_l">
<ul>
<li><a href="#">小米商城</a><s>|</s></li>
<li><a href="#">MIUI</a><s>|</s></li>
<li><a href="#">LOT</a><s>|</s></li>
<li><a href="#">云服务</a><s>|</s></li>
<li><a href="#">水滴</a><s>|</s></li>
<li><a href="#">金融</a><s>|</s></li>
<li><a href="#">有品</a><s>|</s></li>
<li><a href="#">政企服务</a><s>|</s></li>
<li><a href="#">select Region</a></li>
</ul>
</div>

CSS部分:

.top .top_page .top_page_l ul li{
float: left;
margin-right: 6px;//要计算好距离
}
.top .top_page .top_page_l ul li a{
display: inline-block;
margin-right: 6px;//计算好距离
}

 

方法二:

HTML:

       <div>

<a href="">注册</a>

<span class="fenge"></span>

<a href="">登录</a>

        </div>

CSS:

         .fenge{

padding:12px 6px 0px 6px;

margin-left: 6px;

border-left: 1px solid #000;

font-size: 0;

}

利用border和padding ,这里使用padding主要是可以调控竖线的高度。实现可控性。优点:可控性高;缺点:多一个空白节点;

方法三(我一般不用 。因为ps不好)

HTML:

       <div>

<a href="" class="reg_img">注册</a>

<a href="">登录</a>

</div>

CSS:

       .reg_img{

               background: url(../images/line.gif) no-repeat right;

               padding-right: 6px;

               display: block;

               margin-right: 6px;

           }

利用背景图片;优点:可控性当然就是图片的制作大小;缺点:要切图;

以上。。。。

 

以上是关于前端导航栏标签中间的小竖线 实现方法的主要内容,如果未能解决你的问题,请参考以下文章

使用标签栏控制器实现导航栏项目的更简单方法?

在标签栏控制器中禁用和启用导航控制器向后滑动的正确方法

Jquery实现动态导航栏和轮播导航栏

Flutter——两种监听导航栏返回按钮的方法

在基于窗口的应用程序 iPhone 中添加标签栏和导航栏

如何在视图控制器中的标签栏和导航栏上全屏显示弹出视图?