|
2、使用label來布局
特點(diǎn)：對于簡單的form布局，此方法在語義表現(xiàn)上更為突出。
通常的解決方法為：
為label和input或其他的外圍添加一個div或p，把該div或p觸發(fā)layout（可以利用Holly Hack設(shè)置height: 1%），并清除左浮動clear:left;。將label設(shè)為float: left;浮動在input或其他的右邊。
讓label 對齊的是方法是：固定label的寬度，然后根據(jù)需要使用text-align向左或者向右對齊。
如果label右側(cè)有多行input或其他，我們可以對div或p設(shè)置padding-left：xpx，然后對label設(shè)置margin-left:-xpx，
設(shè)定寬度的一個小竅門，使用單位em根據(jù)標(biāo)記的最大字?jǐn)?shù)來定寬度，不必辛苦測試px。
當(dāng)然你也可以不用div或p，在每行結(jié)束使用<br />，并且個br設(shè)定清除浮動clear:left;
注意：使用次方法在IE下有個小BUG，那就是div或p里的第一行的input或其他有3px的IE的BUG，我們可以使用只有IE才識別的* html來定義屬性來消除3px的BUG。
下面我們具體來對圖一的設(shè)計(jì)圖進(jìn)行整體布局：
XHTML部分:
<form id="demoform" class="democss" action="">
<p>
<label for="fname" accesskey="F"><span class="required">*</span> First name:</label>
<input type="text" id="fname" value="" />
</p>
<p>
<label for="lname" accesskey="L"><span class="required">*</span> Last name:</label>
<input type="text" id="lname" value="" />
</p>
<p>
<label for="content" accesskey="C"><span class="required">*</span> Preferred content:</label>
<select name="content" id="content">
<option value="us" selected="selected">Yahoo! U.S.</option>
<option value="e1">Yahoo! U.S. in Spanish</option>
<option value="b5">Yahoo! U.S. in Chinese</option>
<option value="cn">Yahoo! China</option>
<option value="uk">Yahoo! United Kingdom</option>
<option value="ar">Yahoo! Argentina</option>
<option value="aa">Yahoo! Asia</option>
<option value="au">Yahoo! Australia</option>
<option value="br">Yahoo! Brazil</option>
<option value="ca">Yahoo! Canada in English</option>
<option value="cf">Yahoo! Canada in French</option>
<option value="fr">Yahoo! France</option>
<option value="de">Yahoo! Germany</option>
<option value="hk">Yahoo! Hong Kong</option>
<option value="in">Yahoo! India</option>
<option value="it">Yahoo! Italy</option>
<option value="kr">Yahoo! Korea</option>
<option value="mx">Yahoo! Mexico</option>
<option value="sg">Yahoo! Singapore</option>
<option value="es">Yahoo! Spain</option>
<option value="tw">Yahoo! Taiwan</option>
</select>
</p>
<p>
<label for="sex" accesskey="G"><span class="required">*</span> Gender:</label>
<select name="sex" id="sex">
<option value="">[Select] </option>
<option value="m">Male</option>
<option value="f">Female</option>
</select>
</p>
<p>
<label for="yid" accesskey="Y"><span class="required">*</span> Yahoo! ID:</label>
<input type="text" value="" id="yid"> <span class="b">@yahoo.com</span><br />
<span class="explain">ID may consist of a-z, 0-9, underscores, and a single dot (.)</span>
</p>
<p>
<label for="pw" accesskey="P"><span class="required">*</span> Password:</label>
<input type="password" value="" id="pw" /><br />
<span class="explain">Six characters or more; capitalization matters!</span>
</p>
<p>
<label for="pw2" accesskey="R"><span class="required">*</span> Re-type password:</label>
<input type="password" value="" id="pw2"/>
</p>
<div id="submit">
<input type="submit" value="Submit" class="submit"/> <input type="reset" value="Reset" class="submit"/>
</div>
</form>
CSS部分:
* {
margin:0;
padding:0;
}
input,select {
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
}
.required {
font:0.8em Verdana !important;
color:#f68622;
}
.explain {
color:#808080;
}
.b {
font-weight:bold;
font-size:12px;
}
.democss {
font:11px/12px Arial, Helvetica, sans-serif;
color:#333;
}
.democss p {
width: 298px;
clear: left;
padding:4px;
padding-left: 122px;
text-align:left;
height: 1%;
}
.democss label {
float: left;
margin-left: -122px;
width: 110px;
padding:4px 4px 0;
text-align:right;
}
.democss input {
width:180px;
}
.democss select#content {
width:185px;
}
.democss input.submit {
width:70px;
}
div#submit {
width:298px;
text-align:left;
padding:4px;
padding-left:122px;
}
* html .democss input,* html .democss select{
margin-left: -3px;
}
* html div#submit input{
margin-left: 0px;
}
具體演示:
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
出處：藍(lán)色理想
責(zé)任編輯：blue
上一頁 使用table布局 下一頁 使用dl、dt、dd布局
◎進(jìn)入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁 
第 2 頁 使用label布局
