checkbox后面的元素错位

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


.display-label,

.display-field,

.editor-field

{

	margin: 0.5em 0;

}



.editor-label

{

	margin: 0.5em 1em;

	text-align: right; 

	float: left;

	width: 130px;

}

页面代码如下:


<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不准确
...全文
301 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
icecools 2012-05-30
  • 打赏
  • 举报
 回复
谢谢大家，好像都不行啊
我想显示的是3行
乌镇程序员 2012-05-30
  • 打赏
  • 举报
 回复
.editor-label {
margin: 0 1em;
text-align: right;
float: left;
width: 130px;
}
小草草草哟 2012-05-30
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 的回复:]
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……
[/Quote]
顶一个
弘毅致远 2012-05-30
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 的回复:]

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
{
……
[/Quote]
这个不行。
弘毅致远 2012-05-30
  • 打赏
  • 举报
 回复 


<!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>
弘毅致远 2012-05-30
  • 打赏
  • 举报
 回复
<!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>
JJYY0088 2012-05-30
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 的回复:]
.editor-label {
margin: 0 1em;
text-align: right;
float: left;
width: 130px;
}
[/Quote]
左边文字不能整行显示，加css
.editor-label{white-space:nowrap}



LZ 这样做何苦，用表格不是更加简单，还有 <fieldset> 不是兼容所有浏览器
乌镇程序员 2012-05-30
  • 打赏
  • 举报
 回复
[Quote=引用 9 楼 的回复:]

谢谢大家，好像都不行啊
我想显示的是3行
[/Quote]

测试过？
JJYY0088 2012-05-30
  • 打赏
  • 举报
 回复
CSS多了，简化一下



<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>
JJYY0088 2012-05-30
  • 打赏
  • 举报
 回复
你要这样搞的话，要加<div style="clear:both"></div> 清除浮动了



<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>
001007009 2012-05-29
  • 打赏
  • 举报
 回复 


<!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>


试试
澄清寰宇 2012-05-29
  • 打赏
  • 举报
 回复
给个截图看一下
Vite + Vue3 + ElementPlus业务组件封装
企业级业务组件封装，更贴近工作。本课程包括：Button组件封装体会封装思想；Form组件封装：集成 Select、DatePicker、Checkbox等相关表单控件；Table组件封装；封装的组件在项目中的应用演示。改变传统的UI数据传递方式，通过属性配置的方式对组件数据进行渲染基于Vue3+ElementPlus+Vite环境开发，Vue3全新的 setup 语法糖针对初级程序员的开发模式有一个质的提升：提高项目的业务开发效率和逻辑，提高代码复用能力以及可维护性、提高组件模块能力、有更大的机会晋升中级前端开发。
CheckBox位置错位的解决
关于CheckBox位置错位也挺烦人的，今天也是摆弄了一上午，废话不多说。 CheckBox位置错乱主要是convertView点击时复用了，所以可以将CheckBox点击使用Map进行存储，点击则添加，再点击则删除。 private Map map=new HashMap// 存放已被选中的CheckBox 首先先写一个Map，用来存储被选中的CheckBox viewHol
解决checkbox与对应文字不对齐的问题
最近公司比较忙，所以一直在赶项目，很久没有更新博客了。 刚才在工作中又遇到了一个问题，下面我来分享一下吧(｡･∀･)ﾉﾞ 问题所在 我写了一个input，他的类型是checkbox，在他的后面接着label标签进行描述。 html如下： <input type="checkbox" checked="checked" name="sign" id="sign"/> ...
解决checkbox与对应文字不对齐的问题 - AmazingMax - 博客园
解决checkbox与对应文字不对齐的问题 最近公司比较忙，所以一直在赶项目，很久没有更新博客了。 刚才在工作中又遇到了一个问题，下面我来分享一下吧(...
html非input元素,html input元素
1.单选框复选框html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。请看下面的例子:语法：checkbox表单如果要提交多个值，name=‘名称[]’,后面必须添加[].2. 下拉列表框欧洲亚洲非洲 大洋洲北美洲南美洲HTML5 input元素新的特性在HTML5中,元素增加了许多新的属性.方法及控件.本文章分别对这三方...
CSS

61,112

社区成员

60,730

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章