HTML - строчный элемент искажает перенос Li float:left на другую строку

Тема в разделе "Верстка", создана пользователем jabbaxatt, 21 янв 2015.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Статус темы:
Закрыта.
Модераторы: ultra
  1. jabbaxatt

    jabbaxatt Добрый модератор

    Moderator
    Регистр.:
    21 янв 2009
    Сообщения:
    881
    Симпатии:
    414
    Есть ul, в нём много много Li со свойством float:left; Что-бы они были в одну строку и когда ширина строки заканчивалась - они переносились на другую строку.

    Сами Li должны быть фиксированной ширины.Этого я добиваюсь или установлением width самому li или Div внутри Li

    Но внутри есть строчный элемент <a href> в котором текст разной длинны. В результате перенос на следующую строку съёзжаетесли там много текста.

    Код:
    Примерный псевдокод:
    <ul class="bx_catalog_text_ul">
       <li id="bx_1847241719_487">
          <div class="bx_catalog_text_title_2">
          <img class="bx_razdelimg" src="/upload/iblock/4ac/4acc0f13ef1c600467693759bdcd2465.jpeg" alt="Силиконовые изделия"> </a> <br>           
          <a class="podrazdel" href="/catalog/silikonovye_izdeliya/">
          Короткий текст
          </a>
          </div>
        </li>
        <li id="bx_1847241719_487">
          <div class="bx_catalog_text_title_2">
          <img class="bx_razdelimg" src="/upload/iblock/4ac/4acc0f13ef1c600467693759bdcd2465.jpeg" alt="Силиконовые изделия"> </a> <br>           
          <a class="podrazdel" href="/catalog/silikonovye_izdeliya/">
          Длинный текст длинный текст
          </a>
          </div>
        </li>
    </ul>
    Если есть внутри длинный строчный элемент - переносы сбиваются, не смотря на то что внешне "переносятся":

    skrin1.png

    Если его нет - то всё сразу норм:
    skrin2.png

    Пробовал так - не помогло.

    В общем - в итоге сделал проблемным ссылкам position: absolute; теперь она на ширину Li не влияет. А внешний вид стилями подогнал.

    Ну и перенёс в "вёрстку"
     
    Последнее редактирование модератором: 20 окт 2015
  2. Didi

    Didi Создатель

    Регистр.:
    16 окт 2013
    Сообщения:
    34
    Симпатии:
    12
    Смотрим внимательно на скрин: проблема только в том случае когда название продукта на 2 строчки, в то время как остальные на 1. Флоут следуещей строчки упирается в эту вторую строчку а после уже опять кончается экран и следующий элемент падает вниз. Я часто рещаю подобную проблему задавая высоту элементу в котором текст, в этом случае <a class="podrazdel". Так как он "инлайн", ему надо задать display:inline-block, ну и даже block. В этом случае без разницы. Таким образом мы добиваемся того что все элементы "li" будут одинаковой высоты. Высоту <a class="podrazdel" выбрать в зависомости того сколько максимум строк ожидается в самом длинном названии продукта.
     
    jabbaxatt нравится это.
Статус темы:
Закрыта.