表單checkbox和radio文字對(duì)齊的代碼
發(fā)布時(shí)間：2012-07-11 14:14:55 作者：佚名 
我要評(píng)論
我要評(píng)論表單元素input、文字完美垂直居中對(duì)齊方法.
像type="radio" and type="checkbox"的對(duì)齊問題，測(cè)試瀏覽器：ie7+/firefox8.0
原理：將font-family中的第一個(gè)字體設(shè)置Verdana字體
測(cè)試代碼如下：
<!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>表單元素input、文字完美垂直居中對(duì)齊方法-腳本之家webjx.com</title>
<style type="text/css">
body {font:12px/24px verdana;}
ul {list-style:none;}
input,label { vertical-align:middle;}
</style>
</head>
<body>
<ul>
<li><input type="radio" /><label>為受益人的合同</label></li>
<li><input type="checkbox" /><label>為受益人的合同</label></li>
<li><input type="radio" /><label>Microsoft</label></li>
<li><input type="checkbox" /><label>Microsoft</label></li>
</ul>
</body>
</html>
原理：將font-family中的第一個(gè)字體設(shè)置Verdana字體
測(cè)試代碼如下：
復(fù)制代碼
代碼如下:<!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>表單元素input、文字完美垂直居中對(duì)齊方法-腳本之家webjx.com</title>
<style type="text/css">
body {font:12px/24px verdana;}
ul {list-style:none;}
input,label { vertical-align:middle;}
</style>
</head>
<body>
<ul>
<li><input type="radio" /><label>為受益人的合同</label></li>
<li><input type="checkbox" /><label>為受益人的合同</label></li>
<li><input type="radio" /><label>Microsoft</label></li>
<li><input type="checkbox" /><label>Microsoft</label></li>
</ul>
</body>
</html>
相關(guān)文章
- 為了使表單元素和文字都垂直居中對(duì)齊，當(dāng)文本框和下拉框都沒問題，但是單選框和復(fù)選框就了，經(jīng)過反復(fù)測(cè)試終于完整搞定與大家分享，感興趣的各位可不要錯(cuò)過了哈2013-03-21
checkbox與文字混排無(wú)法對(duì)齊導(dǎo)致不美觀的解決方法
checkbox與文字不對(duì)齊會(huì)影響美觀本文將將介紹解決方法：需要checkbox居中對(duì)其 然后文字也要居中對(duì)齊，checkbox在FF和IE下表現(xiàn)不一樣;不管你怎么設(shè)置默認(rèn)的margin和padding2013-01-21HTML教程：圖片大小對(duì)齊間隔邊框?qū)傩孕薷姆椒ń榻B
修改圖片大小對(duì)齊間隔邊框?qū)傩?這些操作在開發(fā)過程中很常見，也很實(shí)用，本文對(duì)此進(jìn)行詳細(xì)介紹下，感興趣的朋友可以了解下啊2013-01-20css 垂直對(duì)齊 css中vertical-align屬性(垂直對(duì)齊)的使用說明
這兩天寫個(gè)頁(yè)面css的時(shí)候用到了vertical-align屬性，使用過程中踩到了坑,因此整理了一些，以備不時(shí)之需，感興趣的朋友可以了解下哦2013-01-09div中加入span右對(duì)齊后出現(xiàn)換行顯示兩種解決思路
div中加入span右對(duì)齊后，出現(xiàn)了換行問題，一般思路的話一定是認(rèn)為通過分開兩列，一個(gè)align=left,另一個(gè)align=right；很是疑惑，于是利用閑暇時(shí)間，搜索整理下，曬出來 2012-12-19 css span右對(duì)齊 css li標(biāo)簽中span日期靠右布局實(shí)現(xiàn)代碼
在網(wǎng)頁(yè)布局中經(jīng)常會(huì)碰到新聞標(biāo)題靠左日期靠右，想要實(shí)現(xiàn)這種布局效果，需要在代碼上下點(diǎn)功夫，本人比較上心，也遇到此問題，于是搜集整理一下，需要的朋友可以參考下2012-12-18怎樣對(duì)齊文本框和圖像(image)按鈕實(shí)現(xiàn)三點(diǎn)一線
一個(gè)文本框旁邊一個(gè)按鈕是很經(jīng)常用到的網(wǎng)頁(yè)內(nèi)容，比如搜索框等等，而如果旁邊的按鈕使用圖像的話，他們豎直方向就很不容易對(duì)齊,這一直是大家所頭疼的問題，于是搜集整理一2012-12-11表單元素radio select對(duì)齊與IE6下雙邊距問題解決方案
之前一直困擾自己的一個(gè)問題就是表單內(nèi)radio、select等的對(duì)齊問題，搞得自己相當(dāng)惱.今天終于花了些時(shí)間找到了好的解決方法.也希望能夠幫到跟我同樣聞form色變的人2012-12-07網(wǎng)頁(yè)中form表單的元素會(huì)出現(xiàn)一些問題：比如文本域和按鈕對(duì)齊問題,這個(gè)問題會(huì)影響到界面的美觀度，本文將介紹如何解決此類問題，需要了解的朋友可以參考下2012-11-30CSS中右對(duì)齊float:right換行的解決辦法
一做站的朋友問我為什么同時(shí)使用FLOAT:LEFT 和RIGHT的時(shí)候不在同一水平線上，二是在另一行，舉個(gè)例子，大家一看就明白了2010-11-02最新評(píng)論
大家感興趣的內(nèi)容
最近更新的內(nèi)容