Четыре столбца формы макета с CSS

Question

С помощью CSS я получил хорошую форму макета с двумя колонками с помощью следующего руководства.

http://articles.sitepoint.com/article/fancy-form-design-css

Моя разметка выглядит примерно как

<form>
  <fieldset> 
    <legend>
      <ol>
        <li>
           <label>
           </label>
           <field>
           <field>
        </li>
        <!-- more fileds -->
      </ol>
  </fieldset>

  <fieldset>
     <!-- similar -->
  </fieldset>

</form>

Это создает хороший макет из двух столбцов. Чего я хотел бы добиться, так это расположить наборы полей один за другим вертикально, расположив их рядом. Это должно дать мне четыре колонки.

Как мне этого добиться?

Answer 1

В вашем CSS:

fieldset { display: inline; }

Элемент <fieldset> имеет тип block по умолчанию.Изменение этого параметра на inline заставит их сидеть рядом друг с другом.

Вы также можете добиться этого эффекта с помощью float: left;, но это может вызвать другие проблемы с компоновкой.