css плавающие 2 поля ввода в форме

Question

У меня есть следующая проблема с пониманием css.

У меня есть регистрационная форма. в этой форме я использую набор полей. теперь я хотел бы позиционировать два поля ввода для каждой строки. также должно быть таблицей для каждого поля выше.

так, что я хотел бы достичь в том, что:

label 1       label 2 
    _______________     _______________ 
    (_______________)    (_______________) 

    label 3      label 4 
    _______________     _______________ 
    (_______________)    (_______________) 

i`m новой для CSS и имеют некоторые проблемы с пониманием поплавка & ясно.

до этого момента я иметь следующую структуру:

  _______________    
label 1 (_______________)    
      _______________    
label 2 (_______________) 
      _______________    
label 3 (_______________) 
      _______________    
label 4 (_______________) 

и вот мои мысли:

У меня есть набор полей, установленные на определенную высоту и ширину:

fieldset { height: 330px; width: 550px;} 

после что я использовал для установки информации для моей маркировки и дизайна ввода:

label { font-family: Arial, Helvetica, sans-serif; 
    font-size: 20px; 
    font-weight: bold; 
    color: #ECECEC; 
    text-decoration: none; 
    width: 100px; 
} 
input { 
    width: 250px; 
    height: 25px; 
    color:#bababa; 
    padding:5px; 
    font-size: 12px; 
    -moz-border-radius: 6px; 
} 

пока что для дизайна. теперь, я думаю, из-за 2-х колоний рядом с тем, что я хотел бы достичь, нужно поплавать каждый из них. так что я должен построить эти два класса:

.fl { float: left; margin-bottom:15px;} 
.fd { clear: left; margin-bottom:15px;} 

в классе фл поплавка означает установить box1 к плавающему свойства, box2 будет с левой стороны от него. fd класс будет для следующей строки. так что box3 перейдет в другую строку. маржа предназначена только для сохранения некоторого пространства между каждым полем.

в моем HTML я получил этот код:

<form> 
<fieldset> 
<legend>Headline for fieldset</legend> 
<ul> 

<li class="fl"> 
<label for="label1">label 1</label> 
<input type="text" id="label1" name="label1" tabindex="10" autocomplete="off"> 
</li> 

<li class="fl"> 
<label for="label2">label2</label> 
<input type="text" id="label2" name="label2" tabindex="20" autocomplete="off"> 
</li> 

<li class="fd"> 
<label for="label3">label3</label> 
<input type="text" id="label3" name="label3" tabindex="30" autocomplete="off"> 
</li> 

<li class="fl"> 
<label for="label4">label4</label> 
<input type="text" id="label4" name="label4" tabindex="40" autocomplete="off"> 
</li> 

</ul> 
</fieldset> 
</form> 

так что у меня следующие вопросы:

1. как я могу достичь, что метки будут располагаться над полями ввода?

2. Как я могу достичь главной цели, чтобы расположить их рядом?

3. Как я могу отрегулировать пространство между полями ввода в одной строке?

если есть кто-то, кто может мне помочь, я действительно был бы признателен. большое спасибо.

Answer 1

Я думаю, что это то, что вы хотите:

fieldset { 
    height: 330px; 
    width: 580px; 
} 

label { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 20px; 
    font-weight: bold; 
    color: #ECECEC; 
    text-decoration: none; 
    width: 100px; 
    display: block; 
} 
input { 
    width: 250px; 
    height: 25px; 
    color:#bababa; 
    padding:5px; 
    font-size: 12px; 
    -moz-border-radius: 6px; 
    margin-right: 15px; 
} 

.fl, .fd { 
    float: left; 
    margin-bottom:15px; 
} 

Edit: рабочий пример: http://jsfiddle.net/7hMCN/

Answer 2

Есть некоторые семантические проблемы с использованием элементов управления формой внутри списка. Но самый простой способ - добраться до вашего решения, чтобы обернуть каждую комбинацию <label><input> в <div>, затем поместите <div>. Использование в качестве таблицы - очень старый способ сделать это.

CSS

form div.left { 
width: 20%; 
float: left; 
display: inline; 
} 
form div.right { 
width: 20%; 
float: right; 
display: inline; 
} 

HTML

<form> 
<div class="left"><label for="one">Label one</label><br> 
<input id="one"></div> 
<div class="right"><label for="two">Label two</label><br> 
<input id="two"></div> 

вы могли бы, вероятно, получить фантазии, если вы не хотите использовать <br> как обертывание либо <label> или <input> в пролете и положение его. Можете ли вы расширить вопрос 3?

Answer 3

Выпуск 1) Я добавил <br /> новые элементы линии (вы могли бы иметь этикетки [и 2?] поплавок влево или изменить display:block;).

Выпуск 3) Я :nth-of-type(odd) и добавил запас правый

Fiddle example here