Wyrównaj etykiety w formie obok wejścia

Mam bardzo podstawowy i znany scenariusz formy, w którym muszę poprawnie wyrównać etykiety obok wejść. Jednak nie wiem, jak to zrobić.

Moim celem byłoby wyrównanie etykiet obok wejść po prawej stronie. Oto przykład pożądanego rezultatu.

Tutaj wpisz opis obrazka

Zrobiłem skrzypce dla Twojej wygody i dla wyjaśnienia, co mam teraz - http://jsfiddle.net/WX58z/

Fragment: 

<div class="block">
    <label>Simple label</label>
    <input type="text" />
</div>
<div class="block">
    <label>Label with more text</label>
    <input type="text" />
</div>
<div class="block">
    <label>Short</label>
    <input type="text" />
</div>
Author: Michał Perłakowski, 2012-03-13
Source

5 answers

Jedno możliwe rozwiązanie:

  • podaj etykiety display: inline-block;
  • podaj im stałą szerokość
  • Align text to the right

Czyli: 

label {
  display: inline-block;
  width: 140px;
  text-align: right;
}​
<div class="block">
    <label>Simple label</label>
    <input type="text" />
</div>
<div class="block">
    <label>Label with more text</label>
    <input type="text" />
</div>
<div class="block">
    <label>Short</label>
    <input type="text" />
</div>

JSFiddle

 154
Author: bfavaretto,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-07 21:28:36

Odpowiadając na takie pytanie, możesz spojrzeć na wyniki Tutaj:

Tworzenie formularzy, które mają pola i tekst obok siebie - jaki jest semantyczny sposób na to?

Aby zastosować te same zasady do fiddle, możesz użyć display:inline-block, Aby wyświetlić etykietę i grupy wejściowe obok siebie, w następujący sposób:

CSS 

input {
    margin-top: 5px;
    margin-bottom: 5px;
    display:inline-block;
    *display: inline;     /* for IE7*/
    zoom:1;              /* for IE7*/
    vertical-align:middle;
    margin-left:20px
}

label {
    display:inline-block;
    *display: inline;     /* for IE7*/
    zoom:1;              /* for IE7*/
    float: left;
    padding-top: 5px;
    text-align: right;
    width: 140px;
}

Updated fiddle

 12
Author: Andres Ilich,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:47:04

Używam czegoś podobnego do tego: 

<div class="form-element">
  <label for="foo">Long Label</label>
  <input type="text" name="foo" id="foo" />
</div>

Style: 

.form-element label {
    display: inline-block;
    width: 150px;
}
 7
Author: Mike G,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-03-13 15:01:03

Chociaż rozwiązania tutaj są wykonalne, nowsza technologia stworzyła to, co myślę, że jest lepszym rozwiązaniem. CSS Grid Layout pozwala nam stworzyć bardziej eleganckie rozwiązanie.

Poniższy CSS zawiera dwukolumnową strukturę "Ustawienia", gdzie oczekuje się, że pierwsza kolumna będzie etykietą wyrównaną do prawej, a następnie część zawartości w drugiej kolumnie. Bardziej skomplikowana treść może być przedstawiona w drugiej kolumnie, zawijając ją w

.

[na marginesie: używam CSS aby dodać':', który śledzi każdą etykietę, ponieważ jest to element stylistyczny - moje preferencje.]

/* CSS */

div.settings {
    display:grid;
    grid-template-columns: max-content max-content;
    grid-gap:5px;
}
div.settings label       { text-align:right; }
div.settings label:after { content: ":"; }
<!-- HTML -->

<div class="settings">
    <label>Label #1</label>
    <input type="text" />

    <label>Long Label #2</label>
    <span>Display content</span>

    <label>Label #3</label>
    <input type="text" />
</div>
 5
Author: David Rutherford,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-07 20:12:50

Możesz również spróbować użyć flex-box 

<head><style>
body {
    color:white;
    font-family:arial;
    font-size:1.2em;
}
form {
    margin:0 auto;
    padding:20px;
    background:#444;
}
.input-group {
    margin-top:10px;
    width:60%;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
}
label, input {
    flex-basis:100px;
}
</style></head>
<body>

<form>
    <div class="wrapper">
        <div class="input-group">
            <label for="user_name">name:</label>
            <input type="text" id="user_name">
        </div>
        <div class="input-group">
            <label for="user_pass">Password:</label>
            <input type="password" id="user_pass">
        </div>
    </div>
</form>

</body>
</html>
 3
Author: user6797117,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-23 00:40:07