Как сделать и появиться на одной строке в HTML-форме?
Я создаю форму регистрации на сайте. Я хочу, чтобы каждая метка и соответствующий ей входной элемент отображались в одной строке.
вот мой код:
HTML-код
<div id="form">
<form action="" method="post" name="registration" class="register">
<fieldset>
<label for="Student"> Name: </label>
<input name="Student" />
<label for="Matric_no"> Matric number: </label>
<input name="Matric_no" />
<label for="Email"> Email: </label>
<input name="Email" />
<label for="Username"> Username: </label>
<input name="Username" />
<label for="Password"> Password: </label>
<input name="Password" type="password" />
<input name="regbutton" type="button" class="button" value="Register" />
</fieldset>
</form>
</div>
в CSS
#form {
background-color: #FFF;
height: 600px;
width: 600px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
padding: 0px;
}
label {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
color: #333;
height: 20px;
width: 200px;
margin-top: 10px;
margin-left: 10px;
text-align: right;
clear: both;
}
input {
height: 20px;
width: 300px;
border: 1px solid #000;
margin-top: 10px;
float: left;
}
10 ответов
предполагая, что вы хотите плавать элементы, вам также придется плавать label
элементы тоже.
что-то вроде этого будет работать..
label {
/* Other styling.. */
text-align: right;
clear: both;
float:left;
margin-right:15px;
}
#form {
background-color: #FFF;
height: 600px;
width: 600px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
padding: 0px;
text-align:center;
}
label {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
color: #333;
height: 20px;
width: 200px;
margin-top: 10px;
margin-left: 10px;
text-align: right;
clear: both;
float:left;
margin-right:15px;
}
input {
height: 20px;
width: 300px;
border: 1px solid #000;
margin-top: 10px;
float: left;
}
input[type=button] {
float:none;
}
<div id="form">
<form action="" method="post" name="registration" class="register">
<fieldset>
<label for="Student">Name:</label>
<input name="Student" />
<label for="Matric_no">Matric number:</label>
<input name="Matric_no" />
<label for="Email">Email:</label>
<input name="Email" />
<label for="Username">Username:</label>
<input name="Username" />
<label for="Password">Password:</label>
<input name="Password" type="password" />
<input name="regbutton" type="button" class="button" value="Register" />
</fieldset>
</form>
</div>
кроме того, более общий подход будет обернуть input
/label
элементов в группах:
<div class="form-group">
<label for="Student">Name:</label>
<input name="Student" />
</div>
#form {
background-color: #FFF;
height: 600px;
width: 600px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
padding: 0px;
text-align:center;
}
label {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
color: #333;
height: 20px;
width: 200px;
margin-top: 10px;
margin-left: 10px;
text-align: right;
margin-right:15px;
float:left;
}
input {
height: 20px;
width: 300px;
border: 1px solid #000;
margin-top: 10px;
}
<div id="form">
<form action="" method="post" name="registration" class="register">
<fieldset>
<div class="form-group">
<label for="Student">Name:</label>
<input name="Student" />
</div>
<div class="form-group">
<label for="Matric_no">Matric number:</label>
<input name="Matric_no" />
</div>
<div class="form-group">
<label for="Email">Email:</label>
<input name="Email" />
</div>
<div class="form-group">
<label for="Username">Username:</label>
<input name="Username" />
</div>
<div class="form-group">
<label for="Password">Password:</label>
<input name="Password" type="password" />
</div>
<input name="regbutton" type="button" class="button" value="Register" />
</fieldset>
</form>
</div>
HTML-код
Я бы предложил вам обернуть их в div, так как вы, вероятно, в конечном итоге плавающие их в определенных контекстах.
<div class="input-w">
<label for="your-input">Your label</label>
<input type="text" id="your-input" />
</div>
в CSS
тогда в этом div вы можете сделать каждый кусок inline-block
так что вы можете использовать vertical-align
центрировать их - или установить базовый уровень и т. д. (ваши метки и входные данные могут изменить размеры в будущем...
.input-w label, .input-w input {
float: none; /* if you had floats before? otherwise inline-block will behave differently */
display: inline-block;
vertical-align: middle;
}
обновление: середина 2016 + с mobile-первые медиа-запросы и flex-box
вот как я делаю вещи в эти дни.
HTML-код
<label class='input-w' for='this-input-name'>
<span class='label'>Your label</span>
<input class='input' type='text' id='this-input-name' placeholder='hello'>
</label>
<label class='input-w' for='this-other-input-name'>
<span class='label'>Your label</span>
<input class='input' type='text' id='this-other-input-name' placeholder='again'>
</label>
SCSS
html { // https://www.paulirish.com/2012/box-sizing-border-box-ftw/
box-sizing: border-box;
*, *:before, *:after {
box-sizing: inherit;
}
} // if you don't already reset your box-model, read about it
.input-w {
display: block;
width: 100%; // should be contained by a form or something
margin-bottom: 1rem;
@media (min-width: 500px) {
display: flex;
flex-directio3: row;
align-items: center;
}
.label, .input {
display: block;
width: 100%;
border: 1px solid rgba(0,0,0,.1);
@media (min-width: 500px) {
width: auto;
display: flex;
}
}
.label {
font-size: 13px;
@media (min-width: 500px) {
/* margin-right: 1rem; */
min-width: 100px; // maybe to match many?
}
}
.input {
padding: .5rem;
font-size: 16px;
@media (min-width: 500px) {
flex-grow: 1;
max-width: 450px; // arbitrary
}
}
}
нашел "display:flex"
style-хороший способ сделать эти элементы в одной строке. Независимо от того, какой элемент в div. Особенно, если входной класс является form-control,другие решения, такие как bootstrap, inline-block, не будут работать хорошо.
пример:
<div style="display:flex; flex-direction: row; justify-content: center; align-items: center">
<label for="Student">Name:</label>
<input name="Student" />
</div>
больше детали о дисплее: гибкий трубопровод:
flex-направление: строка, столбец
justify-content: flex-end, центр, Пространство между, пространство вокруг
выровнять-элементы: растянуть, flex-start, flex-end, center
то, что вам не хватало, было float: left; вот пример, только что сделанный в HTML
<div id="form">
<form action="" method="post" name="registration" class="register">
<fieldset>
<label for="Student" style="float: left">Name:</label>
<input name="Student" />
<label for="Matric_no" style="float: left">Matric number:</label>
<input name="Matric_no" />
<label for="Email" style="float: left">Email:</label>
<input name="Email" />
<label for="Username" style="float: left">Username:</label>
<input name="Username" />
<label for="Password" style="float: left">Password:</label>
<input name="Password" type="password" />
<input name="regbutton" type="button" class="button" value="Register" />
</fieldset>
</form>
более эффективный способ сделать это-добавить класс к меткам и установить float: left; к классу в CSS
Помимо использования поплавков, как предлагали другие, вы также можете положиться на такую структуру, как Bootstrap где вы можете использовать класс "горизонтальная форма", чтобы иметь метку и ввод в одной строке.
Если вы не знакомы с Bootstrap, вам нужно включить:
- по ссылке Bootstrap CSS (верхняя ссылка, где говорится ) в голове, а также добавить некоторые divs:
- div class= "form-group"
- div class= " col-..."
- вместе с class= "col-sm-2 control-label" в каждой метке, как показывает Bootstrap, который я включил ниже.
- Я также переформатировал вашу кнопку, чтобы она была совместима с Bootstrap.
- и добавил легенду в поле формы, так как вы использовали набор полей.
это очень прямо вперед, и вам не придется возиться с поплавками или тонной CSS для форматирования, как указано выше.
<div id="form">
<div class="row">
<form action="" method="post" name="registration" class="register form-horizontal">
<fieldset>
<legend>Address Form</legend>
<div class="form-group">
<label for="Student" class="col-sm-2 control-label">Name:</label>
<div class="col-sm-6">
<input name="Student" class="form-control">
</div>
</div>
<div class="form-group">
<label for="Matric_no" class="col-sm-2 control-label">Matric number: </label>
<div class="col-sm-6">
<input name="Matric_no" class="form-control">
</div>
</div>
<div class="form-group">
<label for="Email" class="col-sm-2 control-label">Email: </label>
<div class="col-sm-6">
<input name="Email" class="form-control">
</div>
</div>
<div class="form-group">
<label for="Username" class="col-sm-2 control-label">Username: </label>
<div class="col-sm-6">
<input name="Username" class="form-control">
</div>
</div>
<div class="form-group">
<label for="Password" class="col-sm-2 control-label">Password: </label>
<div class="col-sm-6">
<input name="Password" type="password" class="form-control">
</div>
</div>
<div>
<button class="btn btn-info" name="regbutton" value="Register">Submit</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
для Bootstrap 4 Это можно сделать с помощью class="form-group" style="display: flex"
<div class="form-group" style="display: flex">
<label>Topjava comment:</label>
<input class="form-control" type="checkbox"/>
</div>
Я сделал это несколькими разными способами, но единственный способ, который я нашел, который держит метки и соответствующие текстовые/входные данные на одной строке и всегда обертывает идеально по ширине родителя, - это использовать display:inline table.
в CSS
.container {
display: inline-table;
padding-right: 14px;
margin-top:5px;
margin-bottom:5px;
}
.fieldName {
display: table-cell;
vertical-align: middle;
padding-right: 4px;
}
.data {
display: table-cell;
}
HTML-код
<div class='container'>
<div class='fieldName'>
<label>Student</label>
</div>
<div class='data'>
<input name="Student" />
</div>
</div>
<div class='container'>
<div class='fieldName'>
<label>Email</label>
</div>
<div class='data'>
<input name="Email" />
</div>
</div>
оберните метку и входные данные в загрузочных div
<div class ="row">
<div class="col-md-4">Name:</div>
<div class="col-md-8"><input type="text"></div>
</div>
#form {
background-color: #FFF;
height: 600px;
width: 600px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
padding: 0px;
text-align:center;
}
label {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
color: #333;
height: 20px;
width: 200px;
margin-top: 10px;
margin-left: 10px;
text-align: right;
margin-right:15px;
float:left;
}
input {
height: 20px;
width: 300px;
border: 1px solid #000;
margin-top: 10px;
}
<div id="form">
<form action="" method="post" name="registration" class="register">
<fieldset>
<div class="form-group">
<label for="Student">Name:</label>
<input name="Student" />
</div>
<div class="form-group">
<label for="Matric_no">Matric number:</label>
<input name="Matric_no" />
</div>
<div class="form-group">
<label for="Email">Email:</label>
<input name="Email" />
</div>
<div class="form-group">
<label for="Username">Username:</label>
<input name="Username" />
</div>
<div class="form-group">
<label for="Password">Password:</label>
<input name="Password" type="password" />
</div>
<input name="regbutton" type="button" class="button" value="Register" />
</fieldset>
</form>
</div>
другой вариант-разместить таблицу внутри формы. (см. ниже) я знаю, что некоторые люди неодобрительно относятся к таблицам, но я думаю, что они хорошо работают, когда дело доходит до адаптивных макетов форм.
<FORM METHOD="POST" ACTION="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi">
<TABLE BORDER="1">
<TR>
<TD>Your name</TD>
<TD>
<INPUT TYPE="TEXT" NAME="name" SIZE="20">
</TD>
</TR>
<TR>
<TD>Your E-mail address</TD>
<TD><INPUT TYPE="TEXT" NAME="email" SIZE="25"></TD>
</TR>
</TABLE>
<P><INPUT TYPE="SUBMIT" VALUE="Submit" NAME="B1"></P>
</FORM>