单选按钮对齐

最新推荐文章于 2021-06-08 10:22:47 发布

窦小豆

最新推荐文章于 2021-06-08 10:22:47 发布

阅读量1k

点赞数

分类专栏： php asp thinkphp

php 同时被 3 个专栏收录

102 篇文章 0 订阅

订阅专栏

thinkphp

95 篇文章 0 订阅

订阅专栏

asp

62 篇文章 0 订阅

订阅专栏

	<!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=utf-8" />

	<title>复选框或单选框与文字对齐的问题的深入研究与解决</title>
	<link rel="shortcut icon" href="http://www.zhangxinxu.com/zxx_ico.png" />
	<link rel="stylesheet" href="../css/common.css" type="text/css" />
	<style type="text/css">
	.zxx_exp{display:block; color:#34538b; margin-top:5px; margin-left:4px;}
	.input_align_1{vertical-align:text-bottom; margin-bottom:2px; *margin-bottom:-2px;}
	.input_align_2{height:13px; vertical-align:text-top; margin-top:0;}
	.input_align_3{height:15px; vertical-align:bottom; margin-bottom:3px; margin-top:-1px;}
	.input_align_4{height:14px; vertical-align:top;}
	.input_align_5{vertical-align:middle; margin-top:-2px; margin-bottom:1px;}
	</style>
	</head>

	<body>
	<div class="zxx_out_box">
	<div class="zxx_in_box">
	<div class="zxx_header">
	<a href="http://www.zhangxinxu.com/">
	<img class="l" src="http://www.zhangxinxu.com/wordpress/wp-content/themes/default/images/index_logo.gif" />
	</a>
	<span class="zxx_author_time">by zhangxinxu 2009-08-26 22:55</span>
	</div>
	<h3 class="zxx_title">复选框或单选框与文字对齐的问题</h3>
	<div class="zxx_main_con">
	<div class="zxx_test_list">
	<input type="radio" />单选框   <input type="checkbox" />复选框
	<span class="zxx_exp">当文字14px左右大小时，对齐良好</span>
	</div>
	<div class="zxx_test_list" style="font-size:1em;">
	<input type="radio" />单选框   <input type="checkbox" />复选框
	<span class="zxx_exp">当文字12px左右大小时，文字的位置就偏下了，火狐浏览器和谷歌浏览器下尤为明显</span>
	</div>
	<div class="zxx_test_list" style="font-size:1em;">
	<input class="input_align_1" type="radio" />单选框   <input class="input_align_1" type="checkbox" />复选框
	<span class="zxx_exp">当文字12px左右大小时，单（复）选框设置vertical-align:text-bottom; margin-bottom:2px; *margin-bottom:-2px;样式后的表现</span>
	</div>
	<div class="zxx_test_list" style="font-size:1em;">
	<input class="input_align_2" type="radio" />单选框   <input class="input_align_2" type="checkbox" />复选框
	<span class="zxx_exp">当文字12px左右大小时，单（复）选框设置height:13px; vertical-align:text-top; margin-top:0;样式后的表现</span>
	</div>
	<div class="zxx_test_list" style="font-size:1em;">
	<input class="input_align_3" type="radio" />单选框   <input class="input_align_3" type="checkbox" />复选框
	<span class="zxx_exp">当文字12px左右大小时，单（复）选框设置height:15px; vertical-align:bottom; margin-bottom:3px; margin-top:-1px;样式后的表现</span>
	</div>
	<div class="zxx_test_list" style="font-size:1em;">
	<input class="input_align_4" type="radio" />单选框   <input class="input_align_4" type="checkbox" />复选框
	<span class="zxx_exp">当文字12px左右大小时，单（复）选框设置height:14px; vertical-align:top;样式后的表现，chrome谷歌浏览器下文字稍微偏上</span>
	</div>
	<div class="zxx_test_list" style="font-size:1em;">
	<input class="input_align_5" type="radio" />单选框   <input class="input_align_5" type="checkbox" />复选框
	<span class="zxx_exp">当文字12px左右大小时，单（复）选框设置vertical-align:middle; margin-top:-2px; margin-bottom:1px;样式后的表现</span>
	</div>
	</div>
	<div class="zxx_footer">
	©<a href="http://www.zhangxinxu.com/">张鑫旭-鑫空间-鑫生活</a>
	\|
	<a href="http://www.zhangxinxu.com/wordpress/?p=56">该篇相关文章</a>
	</div>
	</div>
	</div>
	</body>
	</html>

窦小豆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
单选按钮对齐

xmlns="http://www.w3.org/1999/xhtml"> http-equiv="Content-Type" content="text/html; charset=utf-8" /> 复选框或单选框与文字对齐的问题的深入研究与解决 rel="shortcut icon" href="http:
复制链接

扫一扫

专栏目录