0

Как выровнять текст по вертикальной линии не меняя ширины разношироких иконок?

Есть список со структурой:

<ul>
  ...
  <li>
    <img class="icon" src="icon.svg" />
    <p class="text"> Text </p>
  </li>
  ...
</ul>

Иконки - svg разных размеров (ширина от 40px до 45px). Иконке задан margin-right и мы получаем проблему:

Мой вариант 1 - иконки не соответствуют дизайну

Если мы ставим фиксированную ширину иконки то текст получается по одной вертикальной линии (желаемый результат), но в таком случае иконки по размеру не соответствуют дизайну.

Мой вариант 2 - текст не располагается по одной линии

Если не трогать ширину иконки, то они выглядят как и задумано дизайнером, но текст идёт не по одной вертикальной линии (это недопустимо).

Подскажите пожалуйста как красиво написать стили, чтобы иконки были разной ширины, а текст шёл по одной линии. Желаемый результат

1 ответ 1

1

Красиво тут не получится, ибо для красоты нужно иконки всё же "причесать" (думаю, что и по высоте иконки различаются).

ul {
  margin: 0; padding: 0;
  width: min-content;
  list-style-type: none;
}

li {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}

.icon {
  height: 30px;
  box-shadow: inset 0 0 16px red;
}

.text {
  flex: 1;
  /* Вычитаем ширину самой большой иконки */
  max-width: calc(100% - 50px);
  box-sizing: border-box;
  padding: 0 30px 0 10px;
  white-space: nowrap;
  box-shadow: inset 0 0 8px blue;
}
<ul>
  <li>
    <img width="40px" class="icon" src="icon.svg" alt="40px" />
    <p class="text">Some text</p>
  </li>
  <li>
    <img width="30px" class="icon" src="icon.svg" alt="30px" />
    <p class="text" contenteditable>Этот текст можно изменить</p>
  </li>
  <li>
    <img width="50px" class="icon" src="icon.svg" alt="50px" />
    <p class="text">Hello world</p>
  </li>
</ul>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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