Ik ben een registratieformulier aan het maken voor een website. Ik wil dat elk label en het bijbehorende invoerelement op dezelfde regel verschijnen.
Hier is mijn code:
#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;
}
<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>
Antwoord 1, autoriteit 100%
Ervan uitgaande dat u de elementen wilt laten zweven, zou u ook de label
-elementen moeten laten zweven.
Zoiets zou werken:
label {
/* Other styling... */
text-align: right;
clear: both;
float:left;
margin-right:15px;
}
Antwoord 2, autoriteit 58%
Ik vond de stijl "display:flex"
een goede manier om deze elementen in dezelfde regel te plaatsen. Het maakt niet uit wat voor soort element in de div. Vooral als de invoerklasse form-control is, zullen andere oplossingen zoals bootstrap, inline-block niet goed werken.
Voorbeeld:
<div style="display:flex; flex-direction: row; justify-content: center; align-items: center">
<label for="Student">Name:</label>
<input name="Student" />
</div>
Meer details over display:flex:
flex-richting: rij, kolom
justify-content: flex-end, center, space-between, space-around
align-items: stretch, flex-start, flex-end, center
Antwoord 3, autoriteit 25%
aaa##HTML
Ik stel voor dat je ze in een div plaatst, omdat je ze waarschijnlijk in bepaalde contexten zult laten zweven.
<div class="input-w">
<label for="your-input">Your label</label>
<input type="text" id="your-input" />
</div>
CSS
Vervolgens kun je binnen die div elk stuk inline-block
maken, zodat je vertical-align
kunt gebruiken om ze te centreren – of een baseline enz. in te stellen (je labels en invoer kan in de toekomst van formaat veranderen…
.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;
}
UPDATE: medio 2016 + met mobile-first mediaquery’s en flex-box
Zo doe ik de dingen tegenwoordig.
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-direction: 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
}
}
}
Antwoord 4, autoriteit 7%
Voor Bootstrap 4 zou het kunnen met class="form-group" style="display: flex"
<div class="form-group" style="display: flex">
<label>Topjava comment:</label>
<input class="form-control" type="checkbox"/>
</div>
Antwoord 5, autoriteit 6%
Wat je miste was de vlotter: left; hier is een voorbeeld dat zojuist in de HTML is gemaakt
<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>
De efficiëntere manier om dit te doen is door een klasse aan de labels toe te voegen en de float in te stellen: left; naar de klas in CSS
Antwoord 6, autoriteit 2%
Wikkel het label en de invoer in een bootstraps div
<div class ="row">
<div class="col-md-4">Name:</div>
<div class="col-md-8"><input type="text"></div>
</div>
Antwoord 7, autoriteit 2%
Dit ding werkt goed. Het plaatste een keuzerondje of selectievakje met label in dezelfde regel zonder enige css.
<label><input type="radio" value="new" name="filter">NEW</label>
<label><input type="radio" value="wow" name="filter">WOW</label>
Antwoord 8
Antwoord 9
Een andere optie is om een tabel in het formulier te plaatsen. (zie hieronder) Ik weet dat tabellen door sommige mensen worden afgekeurd, maar ik denk dat ze goed werken als het gaat om responsieve formulierlay-outs.
<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>