如何保持分离出中药丸

时间:2014-08-22 06:58:47

标签: html css3 twitter-bootstrap twitter-bootstrap-3 nav-pills

enter image description here

这是使用以下代码创建的 -

<div class="container" style="padding-top: 5px;width:95%">
    <ul class="nav nav-pills">
        <li><a href="#"><b>Dashboard</b><span class="divider" style="padding-left:20px;">|</span></a></li> 
        <li class="active"><a href="#"><b>Current Order</b> <span class="divider" style="padding-left:20px;">|</span></a></li>
        <li><a href="#"><b>Price Book</b><span class="divider" style="padding-left:20px;">|</span></a></li>
        <li><a href="#"><b>View History</b></a></li>
    </ul>
</div>

这里的分隔符包含在活动标签区域中。如何远离链接中具有相同差异的文本?

1 个答案:

答案 0 :(得分:1)

试试这个:

LIVE_DEMO

CSS:

  .div {
            padding:10px 15px 10px 15px;
        }

HTML

  <div class="container" style="padding-top: 5px;width:95%">
                <ul class="nav nav-pills">
                    <li><a href="#"><b>Dashboard</b></a></li> 
                    <li class="div"><span class="divider">|</span></li>
                    <li><a href="#"><b>Current Order</b> </a></li>
                    <li class="div"><span class="divider">|</span></li>
                    <li><a href="#"><b>Price Book</b></a></li>
                    <li class="div"><span class="divider">|</span></li>
                    <li><a href="#"><b>View History</b></a></li>
                </ul>
            </div>