关于实现移动端界面两个标题在屏幕的二分之一的固定位置显示，且有分割线

本文链接：https://blog.youkuaiyun.com/weixin_40098371/article/details/80446676

本文介绍了一种使用CSS before和after伪元素来创建带有中间分割线的导航栏布局的方法。通过给导航栏两侧的部分添加合适的边框和间距，可以实现在不干扰文档流的情况下美观且响应式的布局效果。

效果图：

思路：

1.本效果图的布局相对简单，唯一需要特别注意的就是中间20px 的分割线。我想了两种方案（border-radius和before after两种方案），测试结果只有这一种方案可行。此方案是将频道回放和相关推荐的宽度均设置为屏幕一半的宽度。然后分别用before 、 after给两部分添加border 宽度为1px。要想实现效果图上的50px.我采用了给bofore和after添加margin的方法实现。

重点讲解：

before、after 占用的空间不影响文档流的布局。换个通俗点儿的说法：before、after占用的空间为其所在元素的内部空间。

html:

css:

nav{
width: 100%;
height: 0.972rem;

}
#navbg{
width: 100%;
height: 100%;
font-size: 0.389rem;
color:#666666;
background-color: #ffffff;

}
#back{
display: inline-block;
width: 50%;
text-align: right;
line-height: 0.972rem;
box-sizing:border-box;

}
#back:after{
content:"";
height: 0.278rem;
margin-left: 0.694rem;
line-height: 0.972rem;
border-right:0.014rem solid #f54343;
}
#recommend{
display: inline-block;
width: 50%;
text-align: left;
line-height: 0.972rem;
box-sizing:border-box;
}
#recommend:before{
content:"";
height: 0.278rem;
line-height: 0.972rem;
margin-right: 0.694rem;
border-left:0.014rem solid #f54343;
}