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

2012-06-04

checkbox后面的元素错位很奇怪的一个问题，我做了一个登录页面，有用户名，是否激活，是否是Admin等字段，后面2

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

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

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

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

HTML code

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

[解决办法]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
       <style type="text/css">
           .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;
           }
       </style>
</head>
<body>
    <fieldset>
       <legend>User</legend>
       <div class="editor-label">
           <label for="Id">User Code</label>
       </div>

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

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

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

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

   </fieldset>
</body>
</html>
[解决办法]
HTML code<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html>    <head>        <title></title>        <style type="text/css">            .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;            }        </style>    </head>    <body>        <fieldset>        <legend>User</legend>        <div class="editor-label">            <label for="Id">User Code</label>        </div>        <div class="editor-field">            <input class="text-box single-line" id="Id" name="Id" type="text" value="" />            <span class="field-validation-valid" data-valmsg-for="Id" data-valmsg-replace="true"></span>        </div>        <div class="clear"></div>        <div style="float:left; border:1px solid green;">            <div class="editor-label">                <label for="IsActive">Keep Active?</label>            </div>            <div class="editor-field">                <input class="check-box" data-val="true" data-val-required="The Keep Active? field is required." id="IsActive" name="IsActive" type="checkbox" value="true" /><input name="IsActive" type="hidden" value="false" />                <span class="field-validation-valid" data-valmsg-for="IsActive" data-valmsg-replace="true"></span>            </div>        </div>        <div style="float:left; border:1px solid green;">            <div class="editor-label">                <label for="IsAdmin">Is Administrator?</label>            </div>            <div class="editor-field">                <input class="check-box" data-val="true" data-val-required="The Is Administrator? field is required." id="IsAdmin" name="IsAdmin" type="checkbox" value="true" /><input name="IsAdmin" type="hidden" value="false" />                <span class="field-validation-valid" data-valmsg-for="IsAdmin" data-valmsg-replace="true"></span>            </div>        </div>        <div class="clear"></div>        <p>            <input type="submit" value="Create" />        </p>    </fieldset>    </body></html>
[解决办法]
探讨
HTML code

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

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

CSS code<head><style type="text/css">.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;}</style></head><body><fieldset>        <legend>User</legend>                <div class="editor-label">            <label for="Id">User Code</label>        </div>        <div class="editor-field">            <input class="text-box single-line" id="Id" name="Id" type="text" value="" />            <span class="field-validation-valid" data-valmsg-for="Id" data-valmsg-replace="true"></span>        </div>    <div style="clear:both"></div>        <div class="editor-label">            <label for="IsActive">Keep Active?</label>        </div>        <div class="editor-field">            <input class="check-box" data-val="true" data-val-required="The Keep Active? field is required." id="IsActive" name="IsActive" type="checkbox" value="true" /><input name="IsActive" type="hidden" value="false" />            <span class="field-validation-valid" data-valmsg-for="IsActive" data-valmsg-replace="true"></span>        </div><div style="clear:both"></div>        <div class="editor-label">            <label for="IsAdmin">Is Administrator?</label>        </div>        <div class="editor-field">            <input class="check-box" data-val="true" data-val-required="The Is Administrator? field is required." id="IsAdmin" name="IsAdmin" type="checkbox" value="true" /><input name="IsAdmin" type="hidden" value="false" />            <span class="field-validation-valid" data-valmsg-for="IsAdmin" data-valmsg-replace="true"></span>        </div>        <p>            <input type="submit" value="Create" />        </p>    </fieldset></body>
[解决办法]
CSS多了，简化一下

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

热点排行