Даже размерные поля ввода, которые совпадают друг с другом, а не начало текста

Question

У меня есть следующий код html, который находится внутри тега body и с использованием стилей CSS. Я хочу, чтобы текстовые поля выстраивались в линию друг с другом, так что это выглядит красиво и даже. Тем не менее, я мог только заставить их быть даже размером, чтобы заголовок был выше их, тогда как я хотел бы, чтобы они были встроены. Что-то вроде (простите мои навыки рисования, и я забыл сделать коробку линии тонкие, что это не то, что я хочу, чтобы выглядеть):

.FormContainer { 
 
    width: 500px; 
 
    clear: both; 
 
} 
 
.FormContainer input { 
 
    width: 100%; 
 
    clear: both; 
 
}

<div class="FormContainer"> 
 
    <form id="LoginForm" name="LoginForm" method="post"> 
 
    <p> 
 
     <label for="EmailAddressLoginField">Email Address:</label> 
 
     <input type="text" name="EmailAddressLoginField" id="EmailAddressLoginField"> 
 
    </p> 
 
    <p> 
 
     <label for="PasswordLoginField">Password:</label> 
 
     <input type="text" name="PasswordLoginField" id="PasswordLoginField"> 
 
    </p> 
 
    <p> 
 
     <input type="submit" name="LoginButton" id="LoginButton" value="Login"> 
 
    </p> 
 
    </form> 
 
</div>

Как Я делаю это?

Без каких-либо таблиц стилей будет выглядеть так, что я и не хочу:

Answer 1

Наиболее гибкий способ будет использовать таблицы в CSS. По сравнению с другими предоставленными решениями, это не требует определения ширины для label (что вы, возможно, не знаете заранее в динамическом мире).

.FormContainer { 
 
    width: 500px; 
 
    clear: both; 
 
} 
 
.FormContainer input { 
 
    width: 100%; 
 
    clear: both; 
 
} 
 
.FormContainer form { 
 
    display: table; 
 
} 
 
.FormContainer form p { 
 
    display: table-row; 
 
} 
 
.FormContainer form p label, 
 
.FormContainer form p input[type=text] { 
 
    display: table-cell; 
 
} 
 
/* if the last paragraph in a form 
 
always contains the submit button, add this: */ 
 

 
.FormContainer form p:last-child { 
 
    display: block; 
 
}

<div class="FormContainer"> 
 
    <form id="LoginForm" name="LoginForm" method="post"> 
 
    <p> 
 
     <label for="EmailAddressLoginField">Email Address:</label> 
 
     <input type="text" name="EmailAddressLoginField" id="EmailAddressLoginField"> 
 
    </p> 
 
    <p> 
 
     <label for="PasswordLoginField">Password:</label> 
 
     <input type="text" name="PasswordLoginField" id="PasswordLoginField"> 
 
    </p> 
 
    <p> 
 
     <input type="submit" name="LoginButton" id="LoginButton" value="Login"> 
 
    </p> 
 
    </form> 
 
</div>

Answer 2

таблица будет одна возможность ...

<div class="FormContainer"> 
<form id="LoginForm" name="LoginForm" method="post"> 
    <table> 
     <tr> 
      <td><label for="EmailAddressLoginField">Email Address:</label></td> 
      <td><input type="text" name="EmailAddressLoginField" id="EmailAddressLoginField"></td> 
     </tr> 
     <tr> 
      <td><label for="PasswordLoginField">Password:</label></td> 
      <td><input type="text" name="PasswordLoginField" id="PasswordLoginField"></td> 
     </tr> 
    </table> 
    <input type="submit" name="LoginButton" id="LoginButton" value="Login"> 
</form> 
</div> 

.. .see this вопрос для других возможностей.

Answer 3

Вот третий вариант я первоначально при условии - вы установили фиксированную ширину этикетки (и то же значение для свойства <p> «обивка левый»: https://jsfiddle.net/p8zmhhwr/2/

.FormContainer { 
 
    width: 500px; 
 
} 
 
.FormContainer p { 
 
    position: relative; 
 
    padding-left: 120px; 
 
} 
 
.FormContainer p:after { 
 
    content: ''; 
 
    display: table; 
 
    clear: both; 
 
} 
 
.FormContainer input, 
 
.FormContainer label { 
 
    display: inline-block; 
 
    float: left; 
 
    box-sizing: border-box; 
 
} 
 
.FormContainer input { 
 
    width: 100%; 
 
} 
 
.FormContainer label { 
 
    position: absolute; 
 
    left: 0; 
 
}

<div class="FormContainer"> 
 
    <form id="LoginForm" name="LoginForm" method="post"> 
 
    <p> 
 
     <label for="EmailAddressLoginField">Email Address:</label> 
 
     <input type="text" name="EmailAddressLoginField" id="EmailAddressLoginField"> 
 
    </p> 
 
    <p> 
 
     <label for="PasswordLoginField">Password:</label> 
 
     <input type="text" name="PasswordLoginField" id="PasswordLoginField"> 
 
    </p> 
 
    <p> 
 
     <input type="submit" name="LoginButton" id="LoginButton" value="Login"> 
 
    </p> 
 
    </form> 
 
</div>

оригинальное решение 50/50%: https://jsfiddle.net/p8zmhhwr/ и пересмотренное решение 70/30%: https://jsfiddle.net/p8zmhhwr/1/

Answer 4

Не знаете, какую технику вы хотите нам е ... Вот что я взбитый:

.FormContainer { 
 
    max-width: 500px; 
 
    text-align: center; 
 
    clear: both; 
 
} 
 
.FormContainer label { 
 
    display: inline-block; 
 
    text-align: left; 
 
    width: 100%; 
 
    max-width: 120px; 
 
} 
 
.FormContainer input:not([type="submit"]){ 
 
    display: inline-block; 
 
    width: 100%; 
 
    max-width: 250px; 
 
    clear: both; 
 
}

<div class="FormContainer"> 
 
    <form id="LoginForm" name="LoginForm" method="post"> 
 
    <p> 
 
     <label for="EmailAddressLoginField">Email Address:</label> 
 
     <input type="text" name="EmailAddressLoginField" id="EmailAddressLoginField"> 
 
    </p> 
 
    <p> 
 
     <label for="PasswordLoginField">Password:</label> 
 
     <input type="text" name="PasswordLoginField" id="PasswordLoginField"> 
 
    </p> 
 
    <p> 
 
     <input type="submit" name="LoginButton" id="LoginButton" value="Login"> 
 
    </p> 
 
    </form> 
 
</div>