Codefragment weergeven

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-blockmaken, zodat je vertical-alignkunt 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;    
}

jsFiddle

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
    }
  }
}

jsFiddle

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

<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>