61,112
社区成员
发帖
与我相关
我的任务
分享由于不知如何简要描述问题，所以只好新开一帖了。
一个DIV+CSS的网站，原来页面使用左对齐，一些输入框可以很容易的用position: absolute; left: 200px;来对齐，显示如下：
姓名： 姓名输入框
职业： 职业输入框
工作单位： 工作单位输入框
Email： 电子邮件输入框
但是，现在客户要求整个页面居中对齐，由于随着浏览器大小变化，左边距会改变，就不能用上述方法对齐了。如果去掉position: absolute;属性，则输入框就会紧跟着前面的说明文字，变成下面这样的。
姓名：姓名输入框
职业：职业输入框
工作单位：工作单位输入框
Email：电子邮件输入框
请问怎么样才能够也象前面那样可以输入框对齐呢？
姓名： 姓名输入框
职业： 职业输入框
工作单位： 工作单位输入框
Email： 电子邮件输入框
但是，现在客户要求整个页面居中对齐，由于随着浏览器大小变化，左边距会改变，就不能用上述方法对齐了。如果去掉position: absolute;属性，则输入框就会紧跟着前面的说明文字，变成下面这样的。
姓名：姓名输入框
职业：职业输入框
工作单位：工作单位输入框
Email：电子邮件输入框
请问怎么样才能够也象前面那样可以输入框对齐呢？
...全文
请发表友善的回复…
发表回复
飘零雾雨 2006-08-29
- 打赏
- 举报
try:
=============
<style>
#dy {width:300px;}
#dy ul {margin:0px;list-style:none;text-align:left;}
#dy ul li {padding:3px;display:block;}
#dy ul li i {font-style:normal;width:40%;}
#dy ul li b {font-weight:normal;width:60%;}
</style>
<div id="dy">
<ul>
<li><i>姓名：</i><b>姓名输入框</b></li>
<li><i>职业：</i><b>职业输入框</b></li>
<li><i>工作单位：</i><b>工作单位输入框</b></li>
<li><i>Email：</i><b>电子邮件输入框</b></li>
</ul>
</div>
=============
<style>
#dy {width:300px;}
#dy ul {margin:0px;list-style:none;text-align:left;}
#dy ul li {padding:3px;display:block;}
#dy ul li i {font-style:normal;width:40%;}
#dy ul li b {font-weight:normal;width:60%;}
</style>
<div id="dy">
<ul>
<li><i>姓名：</i><b>姓名输入框</b></li>
<li><i>职业：</i><b>职业输入框</b></li>
<li><i>工作单位：</i><b>工作单位输入框</b></li>
<li><i>Email：</i><b>电子邮件输入框</b></li>
</ul>
</div>
qiangsheng 2006-08-29
- 打赏
- 举报
多谢，我是写在sapn里了，但是没有成功，我再试试看吧。主要是有很多层DIV嵌套，不知道是否有影响。
大猫钓鱼 2006-08-28
- 打赏
- 举报
还是写个详细的给楼主看看先：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>t2</title>
<style type="text/css">
<!--
body{
margin:0;
}
form{
float:left;
border:1px solid;
width:240px
}
span.s1{
float:left;
clear:left;
width:100px;
text-align:left;
border:0;
}
input.i1{
float:left;
width:120px;
}
-->
</style>
</head>
<body>
<form action="" method="post">
<span class="s1">姓名：</span><input type="text" name="uname" class="i1" />
<span class="s1">职业：</span><input type="text" name="ucareer" class="i1" />
<span class="s1">工作单位：</span><input type="text" name="uworkplace" class="i1" />
<span class="s1">Email：</span><input type="text" name="uemail" class="i1" />
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>t2</title>
<style type="text/css">
<!--
body{
margin:0;
}
form{
float:left;
border:1px solid;
width:240px
}
span.s1{
float:left;
clear:left;
width:100px;
text-align:left;
border:0;
}
input.i1{
float:left;
width:120px;
}
-->
</style>
</head>
<body>
<form action="" method="post">
<span class="s1">姓名：</span><input type="text" name="uname" class="i1" />
<span class="s1">职业：</span><input type="text" name="ucareer" class="i1" />
<span class="s1">工作单位：</span><input type="text" name="uworkplace" class="i1" />
<span class="s1">Email：</span><input type="text" name="uemail" class="i1" />
</form>
</body>
</html>
大猫钓鱼 2006-08-28
- 打赏
- 举报
你可以把“姓名”，“职业”，“工作单位”，“Email”都加个<span></span>呀，利用span的统一width来间接约束后面的输入框显示的位置，例如：
<style>
span.s1{
float:left;
width:100px;
text-align:left;
}
input{
float:left
}
</style>
<span class="s1">姓名：</span><input type="text" name="uname" />
<span class="s1">职业：</span><input type="text" name="ucareer" />
<span class="s1">工作单位：</span><input type="text" name="uworkplace" />
<span class="s1">Email：</span><input type="text" name="uemail" />
<style>
span.s1{
float:left;
width:100px;
text-align:left;
}
input{
float:left
}
</style>
<span class="s1">姓名：</span><input type="text" name="uname" />
<span class="s1">职业：</span><input type="text" name="ucareer" />
<span class="s1">工作单位：</span><input type="text" name="uworkplace" />
<span class="s1">Email：</span><input type="text" name="uemail" />
