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

[jabbaxatt]

Есть 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>

Если есть внутри длинный строчный элемент - переносы сбиваются, не смотря на то что внешне "переносятся":

Спойлер: Скрин 1

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

Спойлер: Скрин 2

Используй свойство display со значение inline-block

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

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

Ну и перенёс в "вёрстку"

 

[Didi]

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