Растягивание border по горизонтали

[randy]

Рисунок 1

Рисунок 2

Здравствуйте! Нужно растянуть рамку вокруг текста как на рисунке 1. У меня получается как на рисунке 2. Подскажите, как исправить? Использую такой код

<span style="border: 1px solid red;">
          Ячейка1
</span>
<span style="border: 1px solid green">
          Ячейка2
</span>
<span style="border: 1px solid purple;">
          Ячейка3
</span>

[Vadimka]

<div style="border: 1px solid red; float: left; widht: 30%; text-aligh: left; ">
          Ячейка1
</div>
<div style="border: 1px solid green float: left; widht: 30%; text-aligh: center; ">
          Ячейка2
</div>
<div style="border: 1px solid purple float: left; widht: 30%; text-aligh: right;">
          Ячейка3
</div>

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

[randy]

<div style="border: 1px solid red; float: left; widht: 30%; text-aligh: left; ">
          Ячейка1
</div>
<div style="border: 1px solid green float: left; widht: 30%; text-aligh: center; ">
          Ячейка2
</div>
<div style="border: 1px solid purple float: left; widht: 30%; text-aligh: right;">
          Ячейка3
</div>

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

так что-то вообще не то.

[hypnocolor]

Товарищ «советчик» понаделал ошибок в коде и даже не удосужился их проверить. Найдите их сами и исправьте, так будет полезней.

[mrnobody]

Работает в IE8+ — http://jsfiddle.net/BrX67/1/

Но лучше таблицей сделать, если это табличные данные.

Edited November 24, 2012 by mrnobody

[randy]

точно, мелкие ошибки были в написании слов и постановки точки-запятой. всем спасибо)

[Vadimka]

да, точку с запятой пропустил. метод с display: table работает от IE8 и выше, старые не будут как надо отображать, метод с float работает на всех, метод с inline-block тоже только в IE8 и выше (ну в остальных браузерах) - но легко сделать поддержку IE6-7, выбирай как тебе удобнее В общем

http://jsfiddle.net/PeKhn/ эти три способа

[npofopr]

для IE6-7