checkbox后面的元素错位解决方法-HTML教程-爱易网页

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

日期：2014-05-17　浏览次数：20674 次

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="tex

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>