借助以下指南,我在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>
这将创建一个不错的两列布局。我想要实现的是将字段集一个接一个地垂直放置,并排放置的感觉。这应该给我四列的布局。
我该如何实现?
最佳答案
在您的CSS中:
fieldset { display: inline; }
默认情况下,
<fieldset>
元素是block
类型。将其更改为inline
将使他们彼此相邻。您也可以使用
float: left;
达到此效果,但这可能会导致其他布局问题。