Какой лучший способ отформатировать эту простую HTML-форму с помощью CSS?

Question

У меня есть простая форма HTML с, скажем, четырьмя входными виджетами (см. Ниже) ... две строки с двумя виджетами на каждой строке.Однако, когда это делает это довольно уродливо.Я хочу, чтобы вся форма была с отступом от края левой страницы, скажем, 40 пикселей, и я хочу, чтобы левый край виджетов совпал друг с другом, а правый край надписей выровнялся.Я также хочу иметь возможность указать минимальное расстояние между правым краем первого виджета и надписью виджета рядом с ним.Как бы я сделал это с помощью CSS?По сути, это выглядит примерно так:

            Name:  _____________     Common Names:  _____________
         Version:  ____________            Status:  ____________ 

См. Текущий неотформатированный HTML ниже:

<form name="detailData">
<div id="dataEntryForm">
<label>
 Name:  <input type="text" class="input_text" name="ddName"/>  Common Names: <input type="text" class="input_text" name="ddCommonNames"><P>
 Version: <input type="text" class="input_text" name="ddVer"/>  Status:  <select name="ddStatus"><option value="A" selected="selected">Active</option><option value="P">Planned</option><option value="D">Deprecated</option>
</label>
</div>
</form>

Answer 1

Базовый стартовый пример:

<div id="dataEntryForm">
    <div class="entry">
        <label for="ddName">Name:</label>
        <input type="text" class="input_text" id="ddName" name="ddName">
    </div>
    <div class="entry">
        <label for="ddCommonNames">Common Names:</label>
        <input type="text" class="input_text" id="ddCommonNames" name="ddCommonNames">
    </div>
    <div class="entry">
        <label for="ddVer">Version:</label>
        <input type="text" class="input_text" id="ddVer" name="ddVer">
    </div>
    <div class="entry">
        <label for="ddStatus">Status:</label>
        <select id="ddStatus" name="ddStatus"><option value="A" selected="selected">Active</option><option value="P">Planned</option><option value="D">Deprecated</option></select>
    </div>
</div>

с этим CSS:

#dataEntryForm {
    width: 600px;
}
#dataEntryForm .entry {
    float: left;
    width: 300px;
}
#dataEntryForm .entry label {
    display: inline-block;
    width: 150px;
    text-align: right;
}

Демонстрационная версия .

Answer 2

http://reisio.com/temp/form1.html

Удалите clear: left; из правила li и установите width для ul и li, если вы хотите два или более рядом.

Answer 3

Для текстовых полей вы можете сделать что-то вроде этого:

.input_text {
      background-color:transparent;
      border-top:none;
      border-left:none;
      border-right:none;
      border-bottom:1px solid #000;
}

В таких полях будет сложнее подобрать стиль, и вы можете захотеть взглянуть на обходной путь Javascript для его стилизации.Примерно так может помочь:

http://www.mypocket -technologies.com / jquery / SelectBoxPlugin /