Question

给出以下HTML代码：

<form id="contact-form">
    <label for="form-company">Company</label>
    <input id="form-company" name="form-company" type="text">

    <label for="form-name">Name</label>
    <input id="form-name" name="form-name" type="text" required>

    <label for="form-email">Email</label>
    <input id="form-email" name="form-email" type="email" required>

    <label for="form-tel">Phone</label>
    <input id="form-tel" name="form-tel" type="tel" required>

    <label for="form-message">Message</label>
    <textarea id="form-message" name="form-message" required>
    </textarea>            

    <input type="submit" value="Submit">
</form>

我想设置此表单的样式，结果如下图所示： enter image description here

最好和最兼容的方法是什么？

Answer 1

这可以通过一系列浮动div很轻松地完成。我已经创建了一个非常接近你想要的jsFiddle：http://jsfiddle.net/xgNBv/

Answer 2

不需要任何额外的html标记的

纯CSS解决方案就像这个小提琴：http://jsfiddle.net/TBwQh/27/。这适用于IE8 +，并且可以在IE7中进行调整（需要进行一些上边距调整），尽管IE7不会显示垂直划分的虚线。

CSS是：

#contact-form {
    width: 600px;
}

#contact-form label {
    display: inline-block;
    width: 176px;
    height: 1em;
    padding: 1.5em 424px 1.5em 0;
    margin-right: -412px;
    text-align: right;
    border-bottom: 1px dashed #bbbbbb;
    position: relative;
}

#contact-form label:after {
    content: '';
    display: inline-block;
    position: absolute;
    width: 0;
    border-right: 1px dashed #bbbbbb;
    top: 0;
    bottom: 0;
    margin: 0 0 0 12px;
}

#contact-form input,
#contact-form textarea {
    display: inline-block;
    width: 376px;
    height: 3em;
    margin: .5em 12px;
    vertical-align: middle; /* textarea needed this */
}

#contact-form input[type=submit] {
    width: 200px;
    margin-left: 188px;
}

显然，可以对尺寸进行一些调整。人们将不得不评估css的“复杂性”或无法在IE7中获得完全相同的外观，以及是否值得不去如上所述的表格或额外的div路线。

Answer 3

我是通过使用table方法完成的。

HTML：

<form id="contact-form">
    <table>
        <tr>
            <td><label for="form-company">Company:</label></td>
            <td><input id="form-company" name="form-company" type="text"></td>
        </tr>
        <tr>
            <td><label for="form-name">Name:</label></td>
            <td><input id="form-name" name="form-name" type="text" required></td>
        </tr>
        <tr>
            <td><label for="form-email">Email:</label></td>
            <td><input id="form-email" name="form-email" type="email" required></td>
        </tr>
        <tr>
            <td><label for="form-tel">Phone:</label></td>
            <td><input id="form-tel" name="form-tel" type="tel" required></td>
        </tr>
        <tr>
            <td><label for="form-message">Message:</label></td>
            <td><textarea id="form-message" name="form-message" required></textarea></td>
        </tr>
    </table> 

    <input type="submit" value="Submit">
</form>

CSS：

*          { margin:0; }
html, body { height: 100%; }

#contact-form {
    height:     100%;
    margin:     0 auto;
    width:      75%;
    text-align: center;
}

#contact-form table { margin: 0 auto; width:  100%; }

#contact-form td:nth-of-type(odd)    { width: 25%; }
#contact-form td:nth-of-type(even)   { width: 75%; }
#contact-form td:nth-of-type(odd)  * { float: right; padding-right: 10%; }
#contact-form td:nth-of-type(even) * { width: 100%; }

#contact-form table textarea { resize: none; }
#form-submit                 { width: 25%; }

HTML + CSS水平有序表单元素

3 个答案: