CSS: перемещать строку вверх, когда она разрывается

Question 1

В моем коде ниже, когда вторая строка прерывается, он перемещает элемент ниже (ul) вниз. Но я бы хотел, чтобы вместо этого переместил верхний элемент вверх. Так что тот, что ниже, остается там, где он есть, но я не могу понять, как это решить.

li {
  display: inline-block;
  font-size: 12px;
}

.container {
  position: relative;
  top: 190px;
  left: 4px;
}

<div class="container">
  <p class="pseudo1">First Line should move up</p>
  <p class="pseudo2">This line shouldn't move the element below it further down when the line breaks</p>
  <ul>
    <li>Lorem Ipsum</li>
    <li>Stay here</li>
    <li>!</li>
  </ul>
</div>

html css

0

Jojo 22 Окт 2019 в 13:51

1

Невозможно, если ваш контейнер не выше содержимого, на данный момент ваш текст уже находится в верхней части контейнера.

–

Dominic

22 Окт 2019 в 14:02

Answer

Надеюсь, это поможет в вашем сценарии. Просто добавьте следующий класс.

li {
  display: inline-block;
  font-size: 12px;
}

.container {
  position: relative;
  top: 190px;
  left: 4px;
}

.pseudo2{
    position: sticky;
    height: 20px;
}

<div class="container">
  <p class="pseudo1">First Line should move up</p>
  <p class="pseudo2">This line shouldn't move the element below it further down when the line breaks</p>
  <ul>
    <li>Lorem Ipsum</li>
    <li>Stay here</li>
    <li>!</li>
  </ul>
</div>

0

Moorthy GK 22 Окт 2019 в 14:11

Question 2

Надеюсь, это поможет в вашем сценарии. Просто добавьте следующий класс.

li {
  display: inline-block;
  font-size: 12px;
}

.container {
  position: relative;
  top: 190px;
  left: 4px;
}

.pseudo2{
    position: sticky;
    height: 20px;
}

<div class="container">
  <p class="pseudo1">First Line should move up</p>
  <p class="pseudo2">This line shouldn't move the element below it further down when the line breaks</p>
  <ul>
    <li>Lorem Ipsum</li>
    <li>Stay here</li>
    <li>!</li>
  </ul>
</div>

0

Moorthy GK 22 Окт 2019 в 14:11

CSS: перемещать строку вверх, когда она разрывается

1 ответ

Похожие вопросы

Новые вопросы

html