Padding on block element

时间:2017-11-13 06:10:11

标签: html css block element padding

enter image description here I cant don this .The problem is in second li I could not give left padding on li I cant don this .The problem is in second li I could not give left padding on li I cant don this .The problem is in second li I could not give left padding on li I cant don this .The problem is in second li I could not give left padding on li

<div class="service-box">
   <div class="header-with-text">
      <div class="img-holder">
      </div>
      <div class="h-text">
         <h3>Unlimited 24/7 Roadside Assistance*</h3>
      </div>
   </div>
   <div class="s-list">
      <ul>
         <li> <i class="fa fa-check-circle" aria-hidden="true"></i>
            Unlimited ernergenry towing.   
         </li>
         <li><i class="fa fa-check-circle" aria-hidden="true"></i>
            Tire change, fuel delivery,
            mechaniial adjustment,Jump start,Lockout service & more!
         </li>
         <li> <i class="fa fa-check-circle" aria-hidden="true"></i>
            Emergency travel & living
            expenses
         </li>
      </ul>
   </div>
</div>

CSS---------

.service-box{
    background: #f0f0ee;
    border-radius: 4px;
    max-width: 310px;
    padding: 19px 19px 16px 16px;
    float: left;
 }
 .header-with-text{
    float: left;
 }
 .header-with-text .img-holder{
    background: url(../images/road-side.png) no-repeat 0 0;
    float: left;
    width: 45px;
    height: 32px;
    display: block;
    margin-right: 10px;
 }
 .h-text{
    float: right;
    max-width: 212px;
 }
 .h-text h3{
    font-size: 20px;
    color: #272b68;
 }
 .s-list ul{
    padding: 0px;
 }
 .s-list ul li{
    list-style: none;
 }

1 个答案:

答案 0 :(得分:0)

 .s-list ul li{
    list-style: none;
    padding-left: 10px;
 }

https://jsfiddle.net/ctmeaqg2/1/

Padding on li works fine. Check!