html - 清除左侧在 firefox/chrome 中创建一个间隙

Question

我对 html/css 越来越生疏了，当我在左侧创建新控件时，我的 Web 应用程序出现了问题。

<div id="leftnav">
<ul><li class="saveAndExit"><a class="noflag" href="" onclick="">Save and Exit</a></li></ul>
<span id=""><ul><div><li><a id="" class="noflag" href="btn0','')" onclick="javascript:keepDirtyFlag();undefined">Introduction</a></li></div><div><li><a id="" class="noflag" href="" onclick="">Applicant Details</a></li></div><div><li><a id="" class="noflag" href=")" onclick="javascript:keepDirtyFlag();undefined">Applicant Details</a></li></div><div><li><a id="" class="noflag" href="" onclick="j">Applicant details – Trust</a></li></div><div><li><a id="" class="noflag" href="" onclick="javascript:keepDirtyFlag();undefined">Applicant contact person – Trust</a></li></div><div><li><a id="" class="noflag" href="" onclick="">Applicant Trustees</a><a onclick="" class="noflag arrow"></a><ul style="display:none"><li><a id="" class="noflag" href="" onclick="javascript:keepDirtyFlag();undefined">Record 1</a></li><li><a id="" class="noflag" href="" onclick="">Record 2</a></li></ul></li></div><div><li><a id="" class="noflag" href="" onclick="">Eligibility Details</a></li></div><div><li><a id="" class="noflag" href="" onclick="">Eligibility Details</a></li></div><div><li><a id="" class="noflag" href="" onclick="">Review</a></li></div></ul></span>
</div>

问题是，我有一个带有以下模板的字段集

<div class="field-container"><div class="field-label"><label for="_Name_txt" id="mCtrl0_Name_txt_fieldLabel" accesskey="M">Na<u>m</u>e<span class="field-asterisk"><acronym title="Required">*</acronym></span></label><em></em></div><div class="field-control"><div class="field-wrapper-passive"><input name="ormCtrl0$Name_txt" type="text" id="mCtrl0_Name_txt" dtext="" class="field-text-idle"></div><div class="field-error-passive"><span id="mCtrl0_ctl06" style="color:Red;display:none;">A name is required</span><span id="mCtrl0_ctl07" style="color:Red;display:none;">The Name must not exceed 200 characters</span></div></div><div class="field-clear"></div></div>

自从我添加了新的 leftnav 控件以来，它显示正确，但现在是“字段清除”类

 .field-clear {
 clear: left;
 line-height: 1px;
 font-size: 1px;
 height: 1px;
 }

清除了左侧的导航列表，并在我的表单中的第一个字段和其他字段之间创建了一个巨大的间隙。我该如何解决这个问题？

编辑:JSFIDDLE http://jsfiddle.net/vS8jt/2/embedded/result/

Answer 1

通过 float 主容器然后在页面底部添加一个清除它的新 div 解决了这个问题。