1

Есть следующий код:

.do__list {
  display: flex;
  justify-content: center;
  color: #103988;
}

.do__item:not(:last-child) {
  margin-right: 46px;
}

.do__item {
  background: #CCCCCC;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  padding: 25px;
  padding-bottom: 38px;
  width: 330px;
  height: 100%;
}

.do__block {
  text-align: center;
}

.do__item-description {
  width: 50%;
}
<ul class="do__list">
  <li class="do__item">
    <div class="do__block">
      <img class="do__img" src="img/delivery.png">
      <h2 class="do__item-description">Дорожная транспортировка</h2>
    </div>
  </li>
  <li class="do__item">
    <div class="do__block">
      <img class="do__img" src="img/cargo-ship.png">
      <h2 class="do__item-description">Морская транспортировка</h2>
    </div>
  </li>
  <li class="do__item">
    <div class="do__block">
      <img class="do__img" src="img/railroad.png">
      <h2 class="do__item-description">ЖД транспортировка</h2>
    </div>
  </li>
  <li class="do__item">
    <div class="do__block">
      <img class="do__img" src="img/airplane.png">
      <h2 class="do__item-description">Воздушная транспортировка</h2>
    </div>
  </li>
</ul>

Мне нужно что бы текст разделялся на 2 строки в каждом блоке: Вот так это должно выглядеть

Но у меня это выглядит вот так: А вот так это выглядит у меня

HTML CSS занимаюсь недавно, подскажите как исправить.

2 ответа 2

0

Первым делом я рекомендую заменить все ul и li в HTML на div: стили CSS в данном случае самодостаточны, теги списков будут только мешать.

Для расположения элементов в do__item можно использовать flex (как вы сделали в do__list):

.do__item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

Чтобы не мешать flex, нужно также убрать width: 50% в do__item-description. Результат:

Пример 1

Осталось решить проблему с отсутствием переноса в третьем блоке. Слово "ЖД" короткое, поэтому перенос сам не появится. Я предлагаю удлинить его за счёт невидимого текста:

HTML

<h2 class="do__item-description">
  <text class="invisible-text">---</text>
    ЖД
  <text class="invisible-text">---</text>
  транспортировка
</h2>

CSS

.invisible-text {
  color: rgba(0, 0, 0, 0)
}

Результат:

Пример 2

Итоговый код:

HTML

<div class="do__list">
  <div class="do__item">
    <div class="do__block">
      <img class="do__img" src="img/delivery.png" />
      <h2 class="do__item-description">Дорожная транспортировка</h2>
    </div>
  </div>
  <div class="do__item">
    <div class="do__block">
      <img class="do__img" src="img/cargo-ship.png" />
      <h2 class="do__item-description">Морская транспортировка</h2>
    </div>
  </div>
  <div class="do__item">
    <div class="do__block">
      <img class="do__img" src="img/railroad.png" />
      <h2 class="do__item-description">
        <text class="invisible-text">---</text>
          ЖД
        <text class="invisible-text">---</text>
        транспортировка
      </h2>
    </div>
  </div>
  <div class="do__item">
    <div class="do__block">
      <img class="do__img" src="img/airplane.png" />
      <h2 class="do__item-description">Воздушная транспортировка</h2>
    </div>
  </div>
</div>

CSS

.do__list {
  display: flex;
  justify-content: center;
  color: #103988;
}

.do__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #CCCCCC;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  padding: 25px;
  padding-bottom: 38px;
  width: 330px;
  height: 100%;
}

.do__item:not(:last-child) {
  margin-right: 46px;
}

.do__block {
  text-align: center;
}

.invisible-text {
  color: rgba(0, 0, 0, 0)
}
0

Зачем вы ставите пробелы в css свойствах?

.do__block {
  text - align: center; /** Не сработает */
  text-align: center; /** Сработает */
}

И так у вас со многими свойствами, где есть -.

.do__list {
  display: flex;
  justify-content: center;
  color: #103988;
}

.do__item:not(:last-child) {
  margin-right: 46px;
}

.do__item {
  background: # CCCCCC;
  box-shadow: 0 px 4 px 4 px rgba(0, 0, 0, 0.25);
  border-radius: 10 px;
  padding: 25 px;
  padding-bottom: 38 px;
  width: 330 px;
  height: 100 %;
}

.do__block {
  text-align: center; /** Не сработает */
}

.do__item - description {
  width: 50 %;
  text-align: center;
}
<ul class="do__list">
  <li class="do__item">
    <div class="do__block">
      <img class="do__img" src="img/delivery.png">
      <h2 class="do__item-description">Дорожная транспортировка</h2>
    </div>
  </li>
  <li class="do__item">
    <div class="do__block">
      <img class="do__img" src="img/cargo-ship.png">
      <h2 class="do__item-description">Морская транспортировка</h2>
    </div>
  </li>
  <li class="do__item">
    <div class="do__block">
      <img class="do__img" src="img/railroad.png">
      <h2 class="do__item-description">ЖД транспортировка</h2>
    </div>
  </li>
  <li class="do__item">
    <div class="do__block">
      <img class="do__img" src="img/airplane.png">
      <h2 class="do__item-description">Воздушная транспортировка</h2>
    </div>
  </li>
</ul>

2
  • я не ставлю пробелы в свойствах, это какая то ошибка редактирования
    – Salivan
    Commented 20 июл. 2022 в 9:22
  • @Salivan так вроде текст по центру
    – Neverm1ndo
    Commented 20 июл. 2022 в 12:12

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.