表模块素和文本竖直垂直居中对齐难题处理梳理

日期:2020-09-24 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

表单网页页面,以便使表模块素和文本都竖直垂直居中对齐,加个款式input,select{vertical-align:middle},文字框和往下拉框都没难题,可是单选框和复选框就杯具了。
大多数主要表现:单选,复选和文本无间隔,单选文本偏上,复选偏上。

有关这些难题在网上有人发布了观点,用table搞定1切。这个也是1种方式,哥也不BS。
针对ie6,7下的文本间隔难题,在网上看到有人说设定width:14px就行了,我试了下发现width:13px更佳。这个难题处理。

针对文本偏上的难题,试了vertical-align下的全部特性都不好。后来发现vertical-align是能够设定标值的,简直白混了这么久。
单选设定了vertical-align:⑵px;复选设定vertical-align:⑶px;就ok了。拿到ie6,7下检测,发现差了1px,应用了hack搞定。(ie6,7便是奇异)

详细编码以下

拷贝编码
编码以下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表单网页页面</title>
<style type="text/css">
<!--
body,ul,input,select{margin:0px;padding:0px;}
body{font-size:12px;}
ul{list-style:none;margin:20px auto;width:500px;}
ul li{height:30px;}
ul li input,ul li select{vertical-align:middle;}
.input{height:18px;line-height:18px;border:1px #999999 solid;}
.checkbox,.radio{*width:13px;}
.radio{vertical-align:⑵px;*vertical-align:⑴px;}
.checkbox{vertical-align:⑶px;*vertical-align:⑵px;}
-->
</style>
</head>
<body>
<ul>
<li>名字:<input type="text" class="input" /></li>
<li>性別:<input type="radio" name="sex" class="radio" value="1" />男 <input type="radio" name="sex" class="radio" value="2" />女</li>
<li>年纪:<select name="age" class="select">
<option value="">请挑选</option>
<option>20下列</option>
<option>20⑶0</option>
<option>30⑷0</option>
<option>40以上</option>
</select></li>
<li>兴趣爱好:<input type="checkbox" class="checkbox" name="interest" />上网 <input type="checkbox" class="checkbox" name="interest" />歌曲 <input type="checkbox" class="checkbox" name="interest" />手机游戏 <input type="checkbox" class="checkbox" name="interest" />电影 <input type="checkbox" class="checkbox" name="interest" />别的</li>
<li></li>
</ul>
</body>
</html>