高级CSS技巧-CSS Tableless Form

这是一个您能作为模板使用的轻量级的tableless CSS表单。 它使用float和消除margin值的进行组合的二栏表单。表单的一个问题是IE6有个bug，在第三个复选框不能对齐，解决办法是抵销margin值。您可以增加具体的固定值，虽然会增加代码的大小。 IE7下3个复选框没有bug。看看下面的效果。

css样式表

.cssform p{
width: 300px;
clear: left;
margin: 0;
padding: 5px 0 8px 0;
padding-left: 155px; /*width of left column containing the label elements*/
border-top: 1px dashed gray;
height: 1%;
}

.cssform label{
font-weight: bold;
float: left;
margin-left: -155px; /*width of left column*/
width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

.cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 180px;
}

.cssform textarea{
width: 250px;
height: 150px;
}

/*.threepxfix class below:
Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html
*/

* html .threepxfix{
margin-left: 3px;
}

xhtml代码

<form id="myform" class="cssform" action="">
        <p>
                <label for="user">Name</label>
                <input type="text" id="user" value="" />
        </p>
        <p>
                <label for="emailaddress">Email Address:</label>
                <input type="text" id="emailaddress" value="" />
        </p>
        <p>
                <label for="comments">Feedback:</label>
                <textarea id="comments" rows="5" cols="25"></textarea>
        </p>
        <p>
                <label for="comments">Sex:</label>
                Male:
                <input type="radio" name="sex" />
                Female:
                <input type="radio" name="sex" />
                <br />
        </p>
        <p>
                <label for="comments">Hobbies:</label>
                <input type="checkbox" name="hobby" />
                Tennis<br />
                <input type="checkbox" name="hobby" />
                Reading <br />
                <input type="checkbox" name="hobby" class="threepxfix" />
                Basketball <br />
        </p>
        <p>
                <label for="terms">Agree to Terms?</label>
                <input type="checkbox" id="terms" class="boxes" />
        </p>
        <div style="margin-left: 150px;">
                <input type="submit" value="Submit" />
                <input type="reset" value="reset" />
        </div>
</form>
 

你对以下文章也许感兴趣：

一个tableless的CSS表单设计

高级CSS技巧-CSS Tableless Form