sağ sınır düzeltmek gerekir ve ben aşağıdaki sonuçlara arıyorum içerik

Question

arasında hizalanmış orta olmalıdır: Bütün gitmek iyidir

. sadece sınır-li'ye li eklemeliyiz. Eklemeye çalıştım ancak içeriğin yarısı kadar yüksekliğini düşüremedim. Yukarıdaki sonucu css sağ sınırını kullanarak nasıl yapabilirim ??

<div class="link-slider-wrap"> 
<div class="container"> 
    <ul class="thumbnails"> 
    <li> 
     <div class="link-wraper"> 
     <span class="icon-clr"> 
      <span class="icon-OnlineAppraisalManagemet"></span> 
     </span> 

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

    <li> 
     <div class="link-wraper"> 
     <span class="icon-clr"> 
      <span class="icon-LeaveManagement"></span> 
     </span> 

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

    <li> 
     <div class="link-wraper"> 
     <span class="icon-clr"> 
      <span class="icon-Assetsmanagement"></span> 
     </span> 

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

    <li> 
     <div class="link-wraper"> 
     <span class="icon-clr"> 
      <span class="icon-CapexAutomation"></span> 
     </span> 

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

    <li> 
     <div class="link-wraper"> 
     <span class="icon-clr"> 
      <span class="icon-SwiftAutomation"></span> 
     </span> 

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

    <li> 
     <div class="link-wraper"> 
     <span class="icon-clr"> 
      <span class="icon-Compliance"></span> 
     </span> 
     </div> 
     <h5>Compliance <br> Tracking</h5> 
    </li> 

    <li> 
     <div class="link-wraper"> 
     <span class="icon-clr"> 
      <span class="icon-UserNetworkAddress"></span> 
     </span> 

     </div> 
     <h5>User Network <br> Resquest</h5> 
    </li> 
    </ul> 
</div> 

Answer 1

Bazı 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; 
} 

eklemek vardır: veya içerik aşağıda

yarısı olarak li sınırını eklemek için herhangi bir iyi bir yol html orada olduğunu

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

Answer 2

@lalji Tadhani Kodu doğru.

Ama görmek istediğiniz bir parça daha var, lütfen aşağıda verilen snippet'i kontrol edin.

Resmi ayrıca kenarlık için de kullanabilirsiniz.

.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>