垂直断行一个内联列表

Question

如何将文字放在垂直范围的中间？

我希望它看起来像：

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.list-group-item2{
  border: none;
  list-style: none;
  font-family: 'Adobe Arabic';
  font-size: 167%;
}
li a{
  color: #000000;
  background: transparent;
}
li a:hover{
  text-decoration: none;
  color: #fd5900;
}
.list-group-item2.sep{
  width: 1px;
  background: url('download.png')left center no-repeat;
}

<div class="container-fluid">
  <div class="row">
    <div class="col-md-12 col-lg-12 hidden-xs text-center">
      <ul class="list-group2 list-inline">
        <li class="list-group-item2">
          <a href="#">آرایشی</a>
        </li>
        <li class="list-group-item2 sep"></li>
        <li class="list-group-item2">
          <a href="#">رایحه</a>
        </li>
        <li class="list-group-item2 sep"></li>
        <li class="list-group-item2">
          <a href="#">شست و شو</a>
        </li>
        <li class="list-group-item2 sep"></li>
        <li class="list-group-item2">
          <a href="#">مو</a>
        </li>
        <li class="list-group-item2 sep"></li>
        <li class="list-group-item2">
          <a href="#">پوست</a>
        </li>
        <li class="list-group-item2 sep"></li>
        <li class="list-group-item2">
          <a href="#">آقایان</a>
        </li>
        <li class="list-group-item2 sep"></li>
        <li class="list-group-item2">
          <a href="#">خانم ها</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Answer 1

根据您显示的示例，听起来您想要一个导航样式列表，其中垂直线分解每个项目，例如：

item 1 | item 2 | item 3 | item 4

您可以通过边框和:last-of-type的组合来实现此目的，以删除列表末尾的最终边框。有关示例代码，请参阅以下CodePen：

http://codepen.io/rkieru/pen/JKyYpx