2、使用label来布局
特点:对于简单的form布局,此方法在语义表现上更为突出。
通常的解决方法为:
为label和input或其他的外围添加一个div或p,把该div或p触发layout(可以利用Holly Hack设置height: 1%),并清除左浮动clear:left;。将label设为float: left;浮动在input或其他的右边。
让label 对齐的是方法是:固定label的宽度,然后根据需要使用text-align向左或者向右对齐。
如果label右侧有多行input或其他,我们可以对div或p设置padding-left:xpx,然后对label设置margin-left:-xpx,
设定宽度的一个小窍门,使用单位em根据标记的最大字数来定宽度,不必辛苦测试px。
当然你也可以不用div或p,在每行结束使用<br />,并且个br设定清除浮动clear:left;
注意:使用次方法在IE下有个小BUG,那就是div或p里的第一行的input或其他有3px的IE的BUG,我们可以使用只有IE才识别的* html来定义属性来消除3px的BUG。
下面我们具体来对图一的设计图进行整体布局:
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; }
具体演示:
运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
出处:蓝色理想
责任编辑:blue
上一页 使用table布局 下一页 使用dl、dt、dd布局
◎进入论坛网页制作、网站综合版块参加讨论
|