如何使用如下附件的分隔符做胶囊形状的 div？

【问题标题】：How to do Capsule shape div with delimiter like below attachment?如何使用如下附件的分隔符做胶囊形状的 div？
【发布时间】：2018-09-15 13:54:47
【问题描述】：

是否可以使用没有设置宽度或高度的边界半径制作胶囊形状并包含在分隔符之间？

【问题讨论】：

标签： css html ionic2

【解决方案1】：

是的，你可以试试这个方法

.container {
    width: 90%;
    padding:20px;
    margin: 10px auto;
    background:#000;
}
ul {
    list-style: none;
    padding: 7px;
    background: #333;
    border-radius: 12px;
    display: inline-flex;
}

li {
    padding: 0 10px;
    border-right: 1px solid #999;
    line-height: 1;
    color: #999;
    font-size: 12px;
    display: inline-block;
    vertical-align: middle;
}

li:last-child {
    border-right: none;
}

<div class="container">
    <ul>
      <li>abc</li>
      <li>def</li>
      <li>ghi</li>
    </ul>
</div>

【讨论】：

您可以通过在 li 的 padding 处添加它。查看编辑后的 sn-p