Span разбивает текст на две части. Возможно ли это исправить.?
Span разбивает текст на две части. Нужно чтоб он шел одним единым тестом. Как это можно справить?
HTML
<div class="header__bottom"> <img class="header__bottom-img" src="images/krest.svg" alt=""> <div class="header__bottom-box"> <p class="header__bottom-text header__bottom-text--one"><span>Мы открыты и принимаем заказы до 21:00</span>, позвоните сейчас и мы сделаем скидку 15%</p> <p class="header__bottom-text header__bottom-text--two"><span><a href="#">Получить скидку</a></span> </p> </div> </div> |
<div class="header__bottom"> <img class="header__bottom-img" src="images/krest.svg" alt=""> <div class="header__bottom-box"> <p class="header__bottom-text header__bottom-text--one"><span>Мы открыты и принимаем заказы до 21:00</span>, позвоните сейчас и мы сделаем скидку 15%</p> <p class="header__bottom-text header__bottom-text--two"><span><a href="#">Получить скидку</a></span> </p> </div> </div>
CSS
.header__bottom { display: flex; justify-content: space-between; position: absolute; left: 0; bottom: 25px; max-width: 1170px; width: 100%; background-color: #000; border-radius: 5px; padding: 15px 0px; } .header__bottom-img { padding-left: 30px; cursor: pointer; } .header__bottom-box{ display: flex; justify-content: space-between; } |
.header__bottom { display: flex; justify-content: space-between; position: absolute; left: 0; bottom: 25px; max-width: 1170px; width: 100%; background-color: #000; border-radius: 5px; padding: 15px 0px; } .header__bottom-img { padding-left: 30px; cursor: pointer; } .header__bottom-box{ display: flex; justify-content: space-between; }
Дополнительно:
Стили не все приложили, но судя по скрину, видимо у вас для .header__bottom-text заданы свойства display:flex;align-items:center;
Ответы:
Тебе здесь для чего флекс?
спан - строка
у тебя он и не должен биться на 2 блока, убери здесь флекс
Мы открыты и принимаем заказы до
21:00, позвоните сейчас и мы сделаем скидку 15%
Когда прописываешь флекс - его элементами внутри автоматически устанавливается display: block
поэтому тебя и делится на 2 блока текст, который должен идти в одну строку.
(Решение: убери класс, который вешает флекс на этот )
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Да, возможно исправить проблему с разбиением текста на две части с использованием тега
для подсветки синтаксиса кода всех языков программирования. Проблема с разбиением текста на две части обычно возникает из-за неправильного использования тега <span>. Для исправления этой проблемы, вам нужно использовать тег <pre lang="php"> вместо <span>. Тег <pre lang="php"> позволяет отображать код в формате блока, сохраняя форматирование и подсветку синтаксиса для всех языков программирования. Пример использования тега <pre lang="php">: <pre lang="php">
Теперь ваш код будет отображаться как блок, сохраняя форматирование и подсветку синтаксиса для языка программирования PHP.
Таким образом, для исправления проблемы с разбиением текста на две части, просто замените использование тега на