需要修复右边框，并且内容应该是中间对齐的

Question

我正在寻找以下结果：

一切都很好。只需要添加border-right到li。 我试图添加，但未能将其高度降低为内容的一半。 我如何使用css右边界来实现上述结果？或者有没有更好的方法将边框添加到li作为内容的一半

下面是html：

datetime

Answer 1

我添加了一些css

ul {
    list-style: outside none none;
}
li {
    float: left;
    margin-right: 10px;
    padding: 0 5px 0 15px;
    position: relative;
}
li::after {
    border-left: 1px solid #ccc;
    content: "";
    height: 20px;
    margin-top: -10px;
    position: absolute;
    right: -10px;
    top: 50%;
    width: 1px;
}
li.last::after {
    border: 0 none;
}

https://jsfiddle.net/mjrwjydq/2/

Answer 2

@lalji Tadhani Code是正确的。

但是，如果你想看到另外一个备用，请查看下面给出的代码段。

您也可以将图像用于边框。

.container{width:1024px;}
.thumbnails{list-style:none;margin:0; padding:0; }
.thumbnails li{margin:0; padding:0 14px 0 16px;width:100px;float:left;text-align:center;background:url(http://i.stack.imgur.com/rE5tI.jpg) no-repeat center right; }
.thumbnails li:last-child{background:none;}
h5{margin:0;}

<div class="link-slider-wrap">
<div class="container">
  <ul class="thumbnails">
    <li>
    <img src="https://cdn1.iconfinder.com/data/icons/picons-social/57/social_ios_round-48.png">
      <div class="link-wraper">
        <span class="icon-clr">
          <span class="icon-OnlineAppraisalManagemet"></span>
        </span>

      </div>
      <h5>Online Appraisal Management</h5>
    </li>

    <li>
    <img src="https://cdn1.iconfinder.com/data/icons/picons-social/57/social_ios_round-48.png">
      <div class="link-wraper">
        <span class="icon-clr">
          <span class="icon-LeaveManagement"></span>
        </span>

      </div>
      <h5>Leave <br> Management</h5>
    </li>

    <li>
    <img src="https://cdn1.iconfinder.com/data/icons/picons-social/57/social_ios_round-48.png">
      <div class="link-wraper">
        <span class="icon-clr">
          <span class="icon-Assetsmanagement"></span>
        </span>

      </div>
      <h5>Asset <br>Movemenet</h5>
    </li>

    <li>
    <img src="https://cdn1.iconfinder.com/data/icons/picons-social/57/social_ios_round-48.png">
      <div class="link-wraper">
        <span class="icon-clr">
          <span class="icon-CapexAutomation"></span>
        </span>

      </div>
      <h5>Capex/Opex <br> Automation</h5>
    </li>

    <li>
    <img src="https://cdn1.iconfinder.com/data/icons/picons-social/57/social_ios_round-48.png">
      <div class="link-wraper">
        <span class="icon-clr">
          <span class="icon-SwiftAutomation"></span>
        </span>

      </div>
      <h5>Swift <br> Automation</h5>
    </li>

    <li>
    <img src="https://cdn1.iconfinder.com/data/icons/picons-social/57/social_ios_round-48.png">
      <div class="link-wraper">
        <span class="icon-clr">
          <span class="icon-Compliance"></span>
        </span>
      </div>
      <h5>Compliance <br> Tracking</h5>
    </li>

    <li>
    <img src="https://cdn1.iconfinder.com/data/icons/picons-social/57/social_ios_round-48.png">
      <div class="link-wraper">
        <span class="icon-clr">
          <span class="icon-UserNetworkAddress"></span>
        </span>

      </div>
      <h5>User Network <br> Resquest</h5>
    </li>
  </ul>
  <div style="clear:both">
  </div>
  </div>
</div>