Question

我正在设置一条垂直线，中间带有按钮，带有引导程序。

使用Bootstrap简单垂直线：

 <div class="row">
    <div class="col-md-6" style="padding-right:20px; border-right: 1px solid #ccc; " >                              
        Area 1
    </div>  
    <div>
        Area 2
    </div>
</div>

上面只显示一条垂直线，但我希望能够在垂直线的中间添加这些线。

<span class="glyphicon glyphicon-arrow-left"></span>
<span class="glyphicon glyphicon-arrow-right"></span>

我无法弄清楚如何使用CSS定位它。有没有好办法解决这个问题？有什么建议吗？

编辑：我补充说 -

<div class="round" style="position: absolute; top: 40%; right: -13px;">
    <span class="glyphicon glyphicon-chevron-right" style="font-size: 1.2em; cursor: pointer;"></span>
</div>
<div class="round" style="position: absolute; top: 55%; right: -14px;">
    <span class="glyphicon glyphicon-chevron-left" style="font-size: 1.2em; cursor: pointer;"></span>
</div>

它有效，但垂直线位于按钮之间..有关更新此内容的任何建议吗？

Answer 1

尝试这样的事情

 <div class="row">
<div class="col-md-6">                              
    <div style="padding-right:20px; border-right: 1px solid #ccc; " >Area 1</div>
</div>  
<div>
    Area 2
</div>

Answer 2

您可以在css中使用after选择器：http://www.w3schools.com/cssref/sel_after.asp

使用它你可以做类似的事情：

<div class="row">
    <div class="col-md-6 myStyle" style="" >                              
        Area 1
    </div>  
    <div>
        Area 2
    </div>
</div> 


.myStyle { 
padding-right:20px; border-right: 1px solid #ccc; }
.myStyle::after{
 font-family: 'Glyphicons Halflings';
 content: "whatever the icon you want is";
}

然后，您可以使用CSS根据需要定位图标。如果您想使用多个Icon，可以使用右侧按钮上的：before选择器和左侧按钮上的after。

HTML垂直线与中间的按钮

2 个答案: