CSS - ширина не учитывается в теге span

Question

У меня проблема с одним из моих пролетов. Пожалуйста, обратите внимание на следующие стили:

.form_container .col1che
{
float: left; 
width: 4%; 
text-align: left;    
}

.form_container .col2che
{
float: left; 
width: 80%; 
text-align:left;
}

.form_container .col3che
{
float: right; 
width: 13%; 
text-align:right;
}

Эти 3 пролета в моем коде:

<div class="row"><!-- start: "row" -->
     <span class="col1che">        
          <?php  //some db feeds    ?>        
     </span>
     <span class="col2che">
          <?php  //some db feeds    ?>
     </span>
     <span class="col3che">
          <?php  //some db feeds    ?>
     </span>
     <div class="clear"></div>
</div><!-- end: "row" -->

Проблема возникает, когда нет данных для отображения в «COL1CHE» (или, возможно, даже в любом из них, хотя я не уверен), когда нет данных, этот диапазон «сворачивается» и его ширина не учитывается. Это происходит в Firefox, в IE это не «рушится».

Я включил «чистый» класс, чтобы посмотреть, помогает ли это, но безрезультатно.

Есть идеи?

Answer 1

Span является встроенным элементом, и поэтому вы не можете установить ширину. Чтобы установить ширину, вы должны сначала установить для него блочный элемент с помощью

display:block;

После этого вы можете установить ширину. Поскольку span является встроенным встроенным элементом, вы также можете использовать встроенный блок, и он будет работать даже в IE:

display:inline-block;

Answer 2

Ширина не учитывается, поскольку span является встроенным элементом. Чтобы это исправить, добавьте:

display: inline-block;

В зависимости от вашей ситуации display: inline-block может быть лучше, чем display: block, поскольку любой контент после интервала не будет перенесен на новую строку.

Answer 3

display: block здесь не поможет , потому что при включении поплавка элементы автоматически переключаются в режим блокировки независимо от его начального режима, поэтому ваша ширина должна работать.

Проблема может быть в пустом теге <span>, который может не отображаться из-за неясного правила, которое я не могу вспомнить. Вы должны попытаться предотвратить пустой интервал, возможно, добавив  , если содержимое пустое.

Answer 4

Чтобы сделать эту работу просто добавьте

display: block;

В стиле.

Answer 5

Дисплей block и опционально с плавающей точкой left мне помогли.

display: block;
float: left;