позиционирования этикетки и входы с помощью CSS

Question

я достиг, чтобы сделать это (макет формы) ...

form layout http://www.stan.com.mx/images/CSSDoubt1.gif

... со следующего CSS ...

label { 
    clear:left; 
    float:left; 
    margin-right:10px; 
    text-align:right; 
    width:100px; 
} 
input { 
    float:left; 
} 

Но Я пытался сделать это другое дело, но безуспешно ...

form layout http://www.stan.com.mx/images/CSSDoubt2.gif

Это похоже на форму sub с такой же компоновкой вместо ввода.

Есть решение для этого?

Answer 1

Как насчет этого?

div { 
    /* either */ margin-left: 110px; 
    /* or */  float: left; 
} 

Answer 2

Это работает на моей машине, испытанной на IE8 и Firefox (единственный браузер я забочусь о)

label { 
    clear:left; 
    float:left; 
    margin-right:10px; 
    text-align:right; 
    width:100px; 
    border:solid 1px; 
} 
input { 
    float:left; 
    border:solid 1px; 
} 
div { 
    float:left; 
    border:solid 1px; 
} 

И HTML код:

<label>x</label><input type="text" /> 
    <label>x</label><input type="text" /> 
    <label>x</label><input type="text" /> 
    <label>x</label><input type="text" /> 
    <label>x</label> 
    <div> 
     <label>y</label><input type="text" /> 
     <label>y</label><input type="text" /> 
     <label>y</label><input type="text" /> 

    </div> 

Answer 3

Плавающие элементы заставляет их визуализироваться как блок-боксы и заставлять неплавающие оболочки течь вокруг них. Элемент div является элементом уровня блока, и по умолчанию ему ясно, что он равен никому, поэтому он отображает в той же строке, что и ваш первый плавающий элемент, и растет, чтобы потреблять всю строку, но элементы ярлыков внутри div устанавливаются влево, чтобы они очищали все элементы метки/ввода и отображаются под ним.

Установив элемент div, чтобы он плавал как вход, он будет отображаться как блок-блок, встроенный в другие поплавки.

Изменение:

input { 
    float:left; 
} 

к:

input, div { 
    float:left; 
}