如何在同一个<ul>父元素中应用<li>中的不同样式？

Question

我已经创建了一个包含3个<li>的<ul>列表。但我希望每个<li>都有不同的页边距-顶部。但是每当我通过给出不同的类名来应用边距来分隔<li>时，所有的<li>都会以那个边距而不是那个特定的<li>来下降。我更改了每个<li>的left-left属性，用类名选择它们，这样就行了，但是顶边距不起作用。有没有人能教我怎么做？下面是我的代码。

​

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

​

Answer 1

添加此CSS

在li上添加垂直对齐的vertical-align:top;

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

​

Answer 2

您已经指定了.person-rating li {。因此，现在指定级联顺序的样式。

示例：

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

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

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

当然，在你的.person-rating li { }中也有vertical-align: top;

JsFiddle

Answer 3

你可以在你的<li>上使用float: left;。然后，您将能够设置愿意的margin-top。

警告:它会将您的<li>显示更改为display: block;。您可以显式地定义它，也可以让浏览器为您定义它。

更多细节：https://developer.mozilla.org/en-US/docs/Web/CSS/float