| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 3971 人关注过本帖
标题:表单复选框与文字的对齐问题
取消只看楼主 加入收藏
zys4416
Rank: 1
等 级:新手上路
帖 子:44
专家分:0
注 册:2006-2-10
收藏
 问题点数:0 回复次数:1 
表单复选框与文字的对齐问题
我在上126邮箱发现登陆框中复选框与文字是对齐的,如图1,我以前一直郁闷为什么我就做不到这样对齐,自己做出来的效果如图2,感觉文字下垂了一些。我分析了代码,却还是找不到原因。求助大伙~怎么办呐~~

图1:
图片附件: 游客没有浏览图片的权限,请 登录注册

图2:
图片附件: 游客没有浏览图片的权限,请 登录注册


[[it] 本帖最后由 zys4416 于 2008-7-23 10:07 编辑 [/it]]
搜索更多相关主题的帖子: 复选 表单 文字 
2008-07-23 10:00
zys4416
Rank: 1
等 级:新手上路
帖 子:44
专家分:0
注 册:2006-2-10
收藏
得分:0 
经过我好几个小时的试验、研究,终于出了成果……期间不断截图、放大400%、计算象素、出过好多套方案……终于做出了比较满意的效果,写成文如下:


单选、复选
单选框是个边长为12px的方框,复选框是个直径为12px的圆钮。我用表格将按钮和文本分隔两列。
单元格高(height)设为24px,偶数的素高便于文本在字体大小(font-size)和行高(line-height)为12px时垂直方向对称居中(上下各空6px)。虽然按钮不能对称居中,不过这也没办法,谁让windows指定了这么个象素高呢。按钮所在的单元格宽(width)可以设为奇数宽,我一般设为23px。
如果CSS控制里使用了*{margin:0px; padding:0px;}的话,Firefox浏览器中按钮有可能不居中,这时要在按钮所在单元格使用控制{text-align: center; vertical-align: middle;}。
如果需要,可在文本的<label>标签外嵌入<span>,然后用类控制器设置左边距(margin-left),值可根据实际情况设定,这里我设为5px。

文本框
文本框的宽和高可以通过CSS自定义。在单元格高(height)为24px、文本的字体大小(font-size)和行高(line-height)为12px时,我对文本框使用ID控制器{height: 15px; padding: 3px 0 0 2px;},这样在IE7和Firefox中文本框对于单元格垂直方向对称居中(上下各空1px)、文本框内的文本也垂直方向对称居中(上下各空4px)。

示例代码:

<html>
<head>
<title>表单</title>

<style type="text/css">
<!--
* {
    font-family: "宋体";
    font-size: 12px;
    line-height: 12px;
    margin: 0;
    padding: 0;
}
td {
    height: 24px;
    text-align: center;
    vertical-align: middle;
}
#user_name {
    height: 15px;
    width: 108px;
    padding: 3px 0 0 2px;
}
.td {
    text-align: left;
}
span {
    margin-left: 5px;
}
-->
</style>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
<table border="0" cellpadding="0" cellspacing="2">
  <tr>
  <td width="23" bgcolor="#FFCCCC"><input type="checkbox" name="checkbox1" id="checkbox1" /></td><td width="136" bgcolor="#CCFFCC" class="td" >
  <span><label for="checkbox1">在此电脑上记住用户名</label></span></td>
  </tr>
  <tr>
  <td bgcolor="#99CCFF"><input type="checkbox" name="checkbox2" id="checkbox2" /></td><td bgcolor="#FFFFCC" class="td">
  <span><label for="checkbox2">SSL安全登录</label></span></td>
  </tr>
  <tr>
  <td bgcolor="#FFCCCC"><input type="radio" name="RadioGroup" id="RadioGroup_0" /></td><td bgcolor="#CCFFCC" class="td">
  <span><label for="RadioGroup_0">所有网页</label></span></td>
  </tr>
  <tr>
  <td bgcolor="#99CCFF"><input type="radio" name="RadioGroup" id="RadioGroup_1" /></td><td bgcolor="#FFFFCC" class="td">
  <span><label for="RadioGroup_1">中文网页</label></span></td>
  </tr>
  <tr bgcolor="#FFE9BB">
  <td colspan="2"><label for="user_name">用户名</label>
  <input type="text" name="user_name" id="user_name" maxlength="18" /></td>  
</table>
</form>
</body>
</html>

学途漫漫而修远,为何行?心自明,只求点滴收获,积米成山,既成、无憾矣。     -zys
2008-07-24 20:47
快速回复:表单复选框与文字的对齐问题
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.078290 second(s), 9 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved