HTML + CSS горизонтальные упорядоченные элементы формы

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>

Я хочу оформить эту форму так, чтобы она выглядела так, как показано на следующем рисунке:

Что лучше исамый совместимый способ сделать это?

Answer 1

Это можно сделать довольно безболезненно с помощью серии плавающих элементов. Я создал jsFiddle, который должен быть очень близок к тому, что вы ищете: http://jsfiddle.net/xgNBv/

Answer 2

Я сделал это с помощью подхода 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%; }

Answer 3

Чистое решение CSS , которое не требует какой-либо дополнительной разметки html, будет похоже на эту скрипку: 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, как уже упоминалось.