checkbox后面的元素错位解决方法

checkbox后面的元素错位
很奇怪的一个问题，我做了一个登录页面，有用户名，是否激活，是否是Admin等字段，后面2个是bool型，所以是checkbox，问题是我现在后面的都错位了，不对齐，哪位可以看看是啥原因啊，谢谢!
css如下

CSS code

.display-label,.display-field,.editor-field{    margin: 0.5em 0;}.editor-label{    margin: 0.5em 1em;    text-align: right;     float: left;    width: 130px;}

页面代码如下:

HTML code

&lt;head&gt;&lt;link href="Site.css" rel="stylesheet" type="text/css" /&gt;&lt;/head&gt;&lt;body&gt;&lt;fieldset&gt;        &lt;legend&gt;User&lt;/legend&gt;        &lt;div class="editor-label"&gt;            &lt;label for="Id"&gt;User Code&lt;/label&gt;        &lt;/div&gt;        &lt;div class="editor-field"&gt;            &lt;input class="text-box single-line" id="Id" name="Id" type="text" value="" /&gt;            &lt;span class="field-validation-valid" data-valmsg-for="Id" data-valmsg-replace="true"&gt;&lt;/span&gt;        &lt;/div&gt;        &lt;div class="editor-label"&gt;            &lt;label for="IsActive"&gt;Keep Active?&lt;/label&gt;        &lt;/div&gt;        &lt;div class="editor-field"&gt;            &lt;input class="check-box" data-val="true" data-val-required="The Keep Active? field is required." id="IsActive" name="IsActive" type="checkbox" value="true" /&gt;&lt;input name="IsActive" type="hidden" value="false" /&gt;            &lt;span class="field-validation-valid" data-valmsg-for="IsActive" data-valmsg-replace="true"&gt;&lt;/span&gt;        &lt;/div&gt;        &lt;div class="editor-label"&gt;            &lt;label for="IsAdmin"&gt;Is Administrator?&lt;/label&gt;        &lt;/div&gt;        &lt;div class="editor-field"&gt;            &lt;input class="check-box" data-val="true" data-val-required="The Is Administrator? field is required." id="IsAdmin" name="IsAdmin" type="checkbox" value="true" /&gt;&lt;input name="IsAdmin" type="hidden" value="false" /&gt;            &lt;span class="field-validation-valid" data-valmsg-for="IsAdmin" data-valmsg-replace="true"&gt;&lt;/span&gt;        &lt;/div&gt;        &lt;p&gt;            &lt;input type="submit" value="Create" /&gt;        &lt;/p&gt;    &lt;/fieldset&gt;&lt;/body&gt;

大家可以存下去看一下就知道问题了，layout不准确

[解决办法]
给个截图看一下
[解决办法]

HTML code

&lt;!DOCTYPE HTML&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="gb2312" /&gt;&lt;link href="Site.css" rel="stylesheet" type="text/css" /&gt;&lt;style type="text/css"&gt;.display-label,.display-field,.editor-field{    margin: 0.5em 0;}.editor-label{    margin: 0.5em 1em;    text-align: right;     float: left;    width: 230px;    clear:float;}.editor-field {    float:left;    width:600px;}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;fieldset&gt;        &lt;legend&gt;User&lt;/legend&gt;        &lt;div class="editor-label"&gt;            &lt;label for="Id"&gt;User Code&lt;/label&gt;        &lt;/div&gt;        &lt;div class="editor-field"&gt;            &lt;input class="text-box single-line" id="Id" name="Id" type="text" value="" /&gt;            &lt;span class="field-validation-valid" data-valmsg-for="Id" data-valmsg-replace="true"&gt;&lt;/span&gt;        &lt;/div&gt;        &lt;div class="editor-label"&gt;            &lt;label for="IsActive"&gt;Keep Active?&lt;/label&gt;        &lt;/div&gt;        &lt;div class="editor-field"&gt;            &lt;input class="check-box" data-val="true" data-val-required="The Keep Active? field is required." id="IsActive" name="IsActive" type="checkbox" value="true" /&gt;&lt;input name="IsActive" type="hidden" value="false" /&gt;            &lt;span class="field-validation-valid" data-valmsg-for="IsActive" data-valmsg-replace="true"&gt;&lt;/span&gt;        &lt;/div&gt;        &lt;div class="editor-label"&gt;            &lt;label for="IsAdmin"&gt;Is Administrator?&lt;/label&gt;        &lt;/div&gt;        &lt;div class="editor-field"&gt;            &lt;input class="check-box" data-val="true" data-val-required="The Is Administrator? field is required." id="IsAdmin" name="IsAdmin" type="checkbox" value="true" /&gt;&lt;input name="IsAdmin" type="hidden" value="false" /&gt;            &lt;span class="field-validation-valid" data-valmsg-for="IsAdmin" data-valmsg-replace="true"&gt;&lt;/span&gt;        &lt;/div&gt;        &lt;p style="clear:both;"&gt;            &lt;input type="submit" value="Create" /&gt;        &lt;/p&gt;    &lt;/fieldset&gt;&lt;/body&gt;&lt;/html&gt; 
 
[解决办法]
.editor-label {
margin: 0 1em;
text-align: right;
float: left;
width: 130px;
}
[解决办法]
探讨
.editor-label {
margin: 0 1em;
text-align: right;
float: left;
width: 130px;
}

[解决办法]
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;&lt;/title&gt;
       &lt;style type="text/css"&gt;
           .display-label,
           .display-field,
           .editor-field
           {
               margin: 0.5em 0;
               float:left;
           }

           .editor-label
           {
               margin: 0.5em 1em;
               text-align: right;  
               float: left;
               width: 150px;
           }
           .clear
           {
               margin:0px;
               padding:0px;
               width:0px;
               height:0px;
               clear:both;
           }
       &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;fieldset&gt;
       &lt;legend&gt;User&lt;/legend&gt;
       &lt;div class="editor-label"&gt;
           &lt;label for="Id"&gt;User Code&lt;/label&gt;
       &lt;/div&gt;

       &lt;div class="editor-field"&gt;
           &lt;input class="text-box single-line" id="Id" name="Id" type="text" value="" /&gt;
           &lt;span class="field-validation-valid" data-valmsg-for="Id" data-valmsg-replace="true"&gt;&lt;/span&gt;
       &lt;/div&gt;
       &lt;div class="clear"&gt;&lt;/div&gt;
       &lt;div style="float:left; border:1px solid green;"&gt;
           &lt;div class="editor-label"&gt;
               &lt;label for="IsActive"&gt;Keep Active?&lt;/label&gt;
           &lt;/div&gt;

           &lt;div class="editor-field"&gt;
               &lt;input class="check-box" data-val="true" data-val-required="The Keep Active? field is required." id="IsActive" name="IsActive" type="checkbox" value="true" /&gt;&lt;input name="IsActive" type="hidden" value="false" /&gt;
               &lt;span class="field-validation-valid" data-valmsg-for="IsActive" data-valmsg-replace="true"&gt;&lt;/span&gt;
           &lt;/div&gt;
       &lt;/div&gt;

       &lt;div style="float:left; border:1px solid green;"&gt;
           &lt;div class="editor-label"&gt;
               &lt;label for="IsAdmin"&gt;Is Administrator?&lt;/label&gt;
           &lt;/div&gt;

           &lt;div class="editor-field"&gt;
               &lt;input class="check-box" data-val="true" data-val-required="The Is Administrator? field is required." id="IsAdmin" name="IsAdmin" type="checkbox" value="true" /&gt;&lt;input name="IsAdmin" type="hidden" value="false" /&gt;
               &lt;span class="field-validation-valid" data-valmsg-for="IsAdmin" data-valmsg-replace="true"&gt;&lt;/span&gt;
           &lt;/div&gt;
       &lt;/div&gt;
       &lt;div class="clear"&gt;&lt;/div&gt;
       &lt;p&gt;
           &lt;input type="submit" value="Create" /&gt;
       &lt;/p&gt; 
 

   &lt;/fieldset&gt;
&lt;/body&gt;
&lt;/html&gt;
[解决办法]
HTML code&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;&lt;html&gt;    &lt;head&gt;        &lt;title&gt;&lt;/title&gt;        &lt;style type="text/css"&gt;            .display-label,            .display-field,            .editor-field            {                margin: 0.5em 0;                float:left;            }            .editor-label            {                margin: 0.5em 1em;                text-align: right;                 float: left;                width: 150px;            }            .clear            {                margin:0px;                padding:0px;                width:0px;                height:0px;                clear:both;            }        &lt;/style&gt;    &lt;/head&gt;    &lt;body&gt;        &lt;fieldset&gt;        &lt;legend&gt;User&lt;/legend&gt;        &lt;div class="editor-label"&gt;            &lt;label for="Id"&gt;User Code&lt;/label&gt;        &lt;/div&gt;        &lt;div class="editor-field"&gt;            &lt;input class="text-box single-line" id="Id" name="Id" type="text" value="" /&gt;            &lt;span class="field-validation-valid" data-valmsg-for="Id" data-valmsg-replace="true"&gt;&lt;/span&gt;        &lt;/div&gt;        &lt;div class="clear"&gt;&lt;/div&gt;        &lt;div style="float:left; border:1px solid green;"&gt;            &lt;div class="editor-label"&gt;                &lt;label for="IsActive"&gt;Keep Active?&lt;/label&gt;            &lt;/div&gt;            &lt;div class="editor-field"&gt;                &lt;input class="check-box" data-val="true" data-val-required="The Keep Active? field is required." id="IsActive" name="IsActive" type="checkbox" value="true" /&gt;&lt;input name="IsActive" type="hidden" value="false" /&gt;                &lt;span class="field-validation-valid" data-valmsg-for="IsActive" data-valmsg-replace="true"&gt;&lt;/span&gt;            &lt;/div&gt;        &lt;/div&gt;        &lt;div style="float:left; border:1px solid green;"&gt;            &lt;div class="editor-label"&gt;                &lt;label for="IsAdmin"&gt;Is Administrator?&lt;/label&gt;            &lt;/div&gt;            &lt;div class="editor-field"&gt;                &lt;input class="check-box" data-val="true" data-val-required="The Is Administrator? field is required." id="IsAdmin" name="IsAdmin" type="checkbox" value="true" /&gt;&lt;input name="IsAdmin" type="hidden" value="false" /&gt;                &lt;span class="field-validation-valid" data-valmsg-for="IsAdmin" data-valmsg-replace="true"&gt;&lt;/span&gt;            &lt;/div&gt;        &lt;/div&gt;        &lt;div class="clear"&gt;&lt;/div&gt;        &lt;p&gt;            &lt;input type="submit" value="Create" /&gt;        &lt;/p&gt;    &lt;/fieldset&gt;    &lt;/body&gt;&lt;/html&gt;
[解决办法]
探讨
HTML code

&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="gb2312" /&gt;
&lt;link href="Site.css" rel="stylesheet" type="text/css" /&gt;
&lt;style type="text/css"&gt;
.display-label,
.display-field,
.editor-f……

------解决方案--------------------  
你要这样搞的话，要加&lt;div style="clear:both"&gt;&lt;/div&gt; 清除浮动了

CSS code&lt;head&gt;&lt;style type="text/css"&gt;.display-label,.display-field,.editor-field{    margin: 0; padding:5px;    text-align:left;    width:300px; }.editor-label{    margin: 0;padding:5px;    text-align: right;     width:130px;    float:left;}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;fieldset&gt;        &lt;legend&gt;User&lt;/legend&gt;                &lt;div class="editor-label"&gt;            &lt;label for="Id"&gt;User Code&lt;/label&gt;        &lt;/div&gt;        &lt;div class="editor-field"&gt;            &lt;input class="text-box single-line" id="Id" name="Id" type="text" value="" /&gt;            &lt;span class="field-validation-valid" data-valmsg-for="Id" data-valmsg-replace="true"&gt;&lt;/span&gt;        &lt;/div&gt;    &lt;div style="clear:both"&gt;&lt;/div&gt;        &lt;div class="editor-label"&gt;            &lt;label for="IsActive"&gt;Keep Active?&lt;/label&gt;        &lt;/div&gt;        &lt;div class="editor-field"&gt;            &lt;input class="check-box" data-val="true" data-val-required="The Keep Active? field is required." id="IsActive" name="IsActive" type="checkbox" value="true" /&gt;&lt;input name="IsActive" type="hidden" value="false" /&gt;            &lt;span class="field-validation-valid" data-valmsg-for="IsActive" data-valmsg-replace="true"&gt;&lt;/span&gt;        &lt;/div&gt;&lt;div style="clear:both"&gt;&lt;/div&gt;        &lt;div class="editor-label"&gt;            &lt;label for="IsAdmin"&gt;Is Administrator?&lt;/label&gt;        &lt;/div&gt;        &lt;div class="editor-field"&gt;            &lt;input class="check-box" data-val="true" data-val-required="The Is Administrator? field is required." id="IsAdmin" name="IsAdmin" type="checkbox" value="true" /&gt;&lt;input name="IsAdmin" type="hidden" value="false" /&gt;            &lt;span class="field-validation-valid" data-valmsg-for="IsAdmin" data-valmsg-replace="true"&gt;&lt;/span&gt;        &lt;/div&gt;        &lt;p&gt;            &lt;input type="submit" value="Create" /&gt;        &lt;/p&gt;    &lt;/fieldset&gt;&lt;/body&gt;
[解决办法]
CSS多了，简化一下

HTML code&lt;style type="text/css"&gt;.display-label,.display-field,.editor-field{    margin: 0; padding:5px;}.editor-label{    margin: 0;padding:5px;    text-align: right;     width:130px;    float:left;}&lt;/style&gt;

checkbox后面的元素错位解决方法

热点推荐