Блог

Главная - Вопросы по программированию - Как применить разные стили в в одном и том же родительском элементе?

Как применить разные стили в в одном и том же родительском элементе?

#html #css

#HTML #css

Вопрос:

Я создал <ul> список с 3 <li> внутри них. Но я хочу, чтобы у каждого <li> было разное поле сверху. Но всякий раз, когда я применяю margin для разделения <li> , также указывая разные имена классов, все <li> сводится к этому полю, а не к этому конкретному <li> . Я изменил свойство margin-left для каждого из них <li> , выбрав их с именем класса, и это работает, но margin-top не работает. Может кто-нибудь, пожалуйста, помочь мне, как этого добиться? Ниже приведен мой код.

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

Комментарии:

1. Где вы устанавливаете верхнюю границу поля? Покажите этот код (и ваш css недействителен)

2. Вероятно, это проблема специфики: w3schools.com/css/css_specificity.asp

Ответ №1:

Добавьте этот CSS

добавить выравнивание по вертикали vertical-align:top; на 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>

Ответ №2:

Вы уже указали .person-rating li { . Итак, теперь стиль, определяющий порядок каскадирования.

пример:

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

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

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

и, конечно, есть vertical-align: top; в вашем .person-rating li { }

JsFiddle

Ответ №3:

Вы можете использовать float: left; на своем <li> . Тогда вы сможете задать желаемое margin-top .

Предупреждение: это изменит отображение вашего <li> на display: block; . Вы можете определить это явно или позволить браузерам сделать это за вас.

Подробнее:https://developer.mozilla.org/en-US/docs/Web/CSS/float

Ответ №4:

Вы можете использовать разные имена классов, или вы можете использовать :селектор nth-of-type в css, но поведение, с которым вы сталкиваетесь, связано с тем, что они будут отображаться в строке, и эта строка по умолчанию будет выравниваться / расширяться, я полагаю, на основе логики визуализации браузеров (например, выравнивание верхнего поля по наибольшему значению и т.д.).

Однако вы могли бы просто использовать позиционирование, подобное этому:

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