Элементы управления табличной формы HTML css

Question

Я делаю простой (ha!) Стол. Есть проблемы с тем, что я включил, что я хотел бы исправить.

1. Я хотел бы, чтобы левые края полей ввода выстроились в линию. Флажок и кнопка нет.
2. Я хотел бы вертикально центрировать текст в ярлыках w.r.t. связанные элементы ввода текста.
3. Я хотел бы избежать края 12 месяцев на конечной кнопке отправки.

Спасибо. Любые идеи оценили.

p { 
 
     text-align: center; 
 
    } 
 
    p label { 
 
     float: left; 
 
     clear: left; 
 
     width: 20em; 
 
     text-align: right; 
 
     margin: .25em 1em 0em 0em; 
 
     padding: .25em; 
 
    } 
 
    p label input { 
 
     float: right; 
 
     clear: right; 
 
     padding: .25em; 
 
    } 
 
    #submit { 
 
     clear: both; 
 
     float: left; 
 
     margin: 1em 0em 0em 12em; 
 
     clear: left; 
 
     width: 6em; 
 
     text-align: center; 
 
     background: yellow; 
 
    } 
 
    p > input { 
 
     text-align: center; 
 
    } 
 
    span { 
 
     padding: 0em 1em 0em 0em; 
 
    }

<form> 
 
    <div> 
 
    <p> 
 
     <label><span>Name:</span> 
 
     <input id="name" type="text" placeholder="Name" autofocus required> 
 
     </label> 
 
    </p> 
 
    <p> 
 
     <label><span>Password:</span> 
 
     <input id="password" type="password" placeholder="Password" required> 
 
     </label> 
 
    </p> 
 
    <p> 
 
     <label><span>Are you a photographer?:</span> 
 
     <input id="photog" type="checkbox"> 
 
     </label> 
 
    </p> 
 
    <p> 
 
     <input type="submit" id="submit" value="Register"> 
 
    </p> 
 
    </div> 
 
</form>

Answer 1

Это не делает все, что вы хотите, но это начало. Я взял <input> элементов за пределами элементов <label>, позволяя <label> s получить фиксированную ширину, добавив display: inline-block. Я также дал атрибут <label> с атрибутом for, чтобы они были связаны с соответствующим полем <input>. Добавив пустой <label> перед кнопкой отправки, он получит правильную компоновку.

В общем, рекомендуется использовать как можно меньше float, а также стиль, используя классы, а не стиль элементов html напрямую. Я лично всегда смотрю на Bootstrap (в этом случае его forms styling), чтобы посмотреть, как они это делают.

label { 
 
    width: 11em; 
 
    display: inline-block; 
 
    text-align: right; 
 
    margin-right: .25em; 
 
    padding: .25em; 
 
} 
 
input { 
 
    padding: .25em; 
 
} 
 
#submit { 
 
    margin: 1em 0em; 
 
    text-align: center; 
 
    background: yellow; 
 
}

<form> 
 
    <div> 
 
    <p> 
 
     <label for="name">Name:</label> 
 
     <input id="name" type="text" placeholder="Name" autofocus required> 
 
    </p> 
 
    <p> 
 
     <label for="password">Password:</label> 
 
     <input id="password" type="password" placeholder="Password" required> 
 
    </p> 
 
    <p> 
 
     <label for="photog">Are you a photographer?:</label> 
 
     <input id="photog" type="checkbox"> 
 
    </p> 
 
    <p> 
 
     <label></label> 
 
     <input type="submit" id="submit" value="Register"> 
 
    </p> 
 
    </div> 
 
</form>

Answer 2

Мое предложение использовать таблицу (ха!) В первую очередь.

Рассмотрите возможность использования: http://jsfiddle.net/qy911wrb/

<table><tr><td></td></tr></table> 

был добавлен, и некоторые CSS регулировали, что вы просили. Просьба указать, должны ли быть какие-либо другие визуальные корректировки.