使用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;实现此效果，但这可能会导致其他布局问题。