四列表格布局与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>

这会创建一个漂亮的两列布局。我想要实现的是将字段集一个接一个地垂直放置的instad，将它们并排放置。这应该给我一个四列布局。

我怎样才能做到这一点？

Answer 1

在CSS中

fieldset { display: inline; }

<fieldset>元素默认为block - 类型。将其更改为inline会使它们彼此相邻。

您也可以使用float: left;实现此效果，但这可能会导致其他布局问题。