当前位置： > 网页制作 > HTML/Xhtml > 文章内容

表单元素与提示文字无法对齐的问题(4)

http://www.itjxue.com 2015-08-05 23:00 来源:未知 点击次数:

于是，尝试去掉radio的外边距，刷新后显示正常。（其实多选框checkbox也是有外边距的，只是它的外边距四个方向都有，并且相等，所以对于垂直对齐没有影响。）下图是一些常用表单元素的最终显示效果以及最终代码，大家可以用不同浏览器看一下实际的效果（注：由于演示使用的12px的中文实际只有11px高，而 IE下文本框等元素的高度是22px，一个是奇数，一个是偶数，所以这些部分在IE中是无论如何也对不齐的，差1px。如果手动控制文本框高度为奇数，或者将文字设置成为偶数的高度，则显示正常）：

运行代码框
<!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>测试vertical-align</title> <style> *{margin:0;} label{vertical-align:middle} .inputcheckbox{vertical-align:middle;} body{font-family:tahoma;font-size:12px;} </style> </head> <body> <input class="inputcheckbox" name="test" value="1" type="checkbox"> <label>测试文字x</label> <br/><br/> <input class="inputcheckbox " name="test2" value="2" type="radio"> <label>测试文字x</label> <br/><br/> <input class="inputcheckbox " name="Text1" type="text" /> <label>文字</label> <input class="inputcheckbox " name="Text1" type="text" /> <label>文字</label> <br/><br/> <label>测试文字</label> <input class="inputcheckbox " name="Button1" type="button" value="按钮" /> <br/><br/> <select class="inputcheckbox " name="Select1"> <option>测试文字</option> </select> <label>测试文字</label> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

而且我发现，不但解决了中文的问题，如果提示信息换成其他语言，基本上也能够对齐，至少不会像开始那样偏移太多。下面是截图、代码和一些例子：

运行代码框
<!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>测试vertical-align</title> <style> label{vertical-align:middle} .inputcheckbox{vertical-align:middle;} body{font-family:tahoma;font-size:12px;} </style> </head> <body> <input class="inputcheckbox " name="test" value="1" type="checkbox"> <label>测试文字x</label> <br/> <input class="inputcheckbox " name="test" value="1" type="checkbox"> <label>這是繁體中文</label> <br/> <input class="inputcheckbox " name="test" value="1" type="checkbox"> <label>次回から自動的にログイン</label> <br/> <input class="inputcheckbox " name="test" value="1" type="checkbox"> <label>English</label> <br/> <input class="inputcheckbox " name="test" value="1" type="checkbox"> <label>Чужой компьютер</label> <br/> <input class="inputcheckbox " name="test" value="1" type="checkbox"> <label>صفحات من ‏السعودية </label> <br/> <input class="inputcheckbox " name="test" value="1" type="checkbox"> <label>회원가입</label> <br/> <input class="inputcheckbox" name="test" value="1" type="checkbox"> <label>הפתוח</label> <br/> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

至此，我的研究过程告于段落。

但是，还是想不通各浏览器为什么最后会显示出这样的效果，其中的原理是什么。牛人们有空可以解释一下吗？

(责任编辑：IT教学网)

复制链接发给好友收藏本文关闭此页

上一篇：用标准dl,dt,dd标签抛弃table列表

下一篇：safari：webkit

表单元素与提示文字无法对齐的问题(4)

(责任编辑：IT教学网)

相关HTML/Xhtml文章

阅读排行

专题教程

推荐HTML/Xhtml文章

最新更新HTML/Xhtml