How to apply different styles in <li> in same <ul> parent element?

user_13884809 0
Viewed 67

I have created a <ul> list with 3 <li> inside them. But I want each <li> to have different margin-top. But whenever I am applying margin to seperate <li> by giving different class names also, still all the <li> comes down by that margin and not that specific <li>. I changed the margin-left property of each <li> by selecting them with the class name and that works but margin-top is not working. Can someone please help me how to achieve it? Below is my code.

 .person-rating li{
    list-style: none;
    display: inline-block;
    width: 25%;
    border: 1px solid rgb(104, 69, 104);
    background-color: rgb(104, 69, 104);
    padding: 30px;
    border-radius: 8px;
    <div class="person-rating">
      <ul>
        <li class="new-1">
          <img src="images/image-anne.jpg">
          <h4>Colton Smith <br>
            Verified Buyer<br></h4>
          <p>"We needed the same printed design as the one we had ordered a week prior.
          Not only did they find the original order, but we also received it in time.
          Excellent!"</p>
        </li>
        <li class="new-2">
          <img src="images/image-colton.jpg">
          <h4>Irene Roberts <br>
          Verified Buyer<br></h4>
          <p>"Customer service is always excellent and very quick turn around. Completely
          delighted with the simplicity of the purchase and the speed of delivery."</p>
        </li>
        <li class="new-3">
          <img src="images/image-irene.jpg">
          <h4>Anne Wallace <br>
          Verified Buyer<br></h4>
          <p>"Put an order with this company and can only praise them for the very high
          standard. Will definitely use them again and recommend them to everyone!"</p>
        </li>
      </ul>
    </div>

css html
4 Answers

Add this CSS

add vertical-align vertical-align:top; on li

.person-rating li.new-1{}
.person-rating li.new-2{margin-top:30px;}
.person-rating li.new-3{margin-top:60px;}


.person-rating li{
    list-style: none;
    display: inline-block;
    width: 25%;
    border: 1px solid rgb(104, 69, 104);
    background-color: rgb(104, 69, 104);
    padding: 30px;
    vertical-align:top;
    border-radius: 8px;
}
.person-rating li.new-1{}
.person-rating li.new-2{margin-top:30px;}
.person-rating li.new-3{margin-top:60px;}
<div class="person-rating">
      <ul>
        <li class="new-1">
          <img src="images/image-anne.jpg">
          <h4>Colton Smith <br>
            Verified Buyer<br></h4>
          <p>"We needed the same printed design as the one we had ordered a week prior.
          Not only did they find the original order, but we also received it in time.
          Excellent!"</p>
        </li>
        <li class="new-2">
          <img src="images/image-colton.jpg">
          <h4>Irene Roberts <br>
          Verified Buyer<br></h4>
          <p>"Customer service is always excellent and very quick turn around. Completely
          delighted with the simplicity of the purchase and the speed of delivery."</p>
        </li>
        <li class="new-3">
          <img src="images/image-irene.jpg">
          <h4>Anne Wallace <br>
          Verified Buyer<br></h4>
          <p>"Put an order with this company and can only praise them for the very high
          standard. Will definitely use them again and recommend them to everyone!"</p>
        </li>
      </ul>
    </div>

user_40950560

You have alrady specifed .person-rating li {. So now style specifiing the Cascading order.

example:

.person-rating li.new-1 { ... }

.person-rating li.new-2 { ... }

.person-rating li.new-3 { ... }

and ofcourse have the vertical-align: top; in your .person-rating li { }

JsFiddle

user_47396280

You can use float: left; on your <li>. Then you will be able to set the willing margin-top.

Warning : it will change the display of your <li> into display: block;. You can define it explicitly, or let browsers do it for you.

More details : https://developer.mozilla.org/en-US/docs/Web/CSS/float

user_142340850

You can use the different classnames, or you can use :nth-of-type selector in css, but the behavior you experience is because they will be rendered in a row and this row by default will align/expand, I believe based on the browsers render logics (such as setting margin top to the highest value aligned etc).

However, you could simply use positioning like this:

.person-rating ul {
  display: flex;
}

.person-rating li {
  list-style: none;
  width: 25%;
  border: 1px solid rgb(104, 69, 104);
  background-color: rgb(104, 69, 104);
  padding: 30px;
  border-radius: 8px;
}

.person-rating li + li {
  margin-left: 5px;
}

.person-rating li:first-of-type {
  position: relative;
  top: 10px;
}

.person-rating li:nth-of-type(2) {
  position: relative;
  top: 20px;
}

.person-rating li:last-of-type {
  position: relative;
  top: 30px;
}
<div class="person-rating">
      <ul>
        <li>
          <img src="images/image-anne.jpg">
          <h4>Colton Smith <br>
            Verified Buyer<br></h4>
          <p>"We needed the same printed design as the one we had ordered a week prior.
          Not only did they find the original order, but we also received it in time.
          Excellent!"</p>
        </li>
        <li>
          <img src="images/image-colton.jpg">
          <h4>Irene Roberts <br>
          Verified Buyer<br></h4>
          <p>"Customer service is always excellent and very quick turn around. Completely
          delighted with the simplicity of the purchase and the speed of delivery."</p>
        </li>
        <li>
          <img src="images/image-irene.jpg">
          <h4>Anne Wallace <br>
          Verified Buyer<br></h4>
          <p>"Put an order with this company and can only praise them for the very high
          standard. Will definitely use them again and recommend them to everyone!"</p>
        </li>
      </ul>
</div>

user_141958950
Related