Richten Sie Beschriftungen in Form neben der Eingabe aus

136

Ich habe ein sehr einfaches und bekanntes Formszenario, in dem ich Beschriftungen neben Eingaben korrekt ausrichten muss. Ich weiß jedoch nicht, wie ich es machen soll.

Mein Ziel wäre es, dass Beschriftungen neben den Eingaben auf der rechten Seite ausgerichtet werden. Hier ist ein Bildbeispiel des gewünschten Ergebnisses.

Geben Sie hier die Bildbeschreibung ein

Ich habe eine Geige für Ihre Bequemlichkeit gemacht und um zu klären, was ich jetzt habe - http://jsfiddle.net/WX58z/

Snippet:

<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>
Erweitern Sie das Snippet

html css alignment Stan
quelle

Antworten:

189

Eine mögliche Lösung:

  • Geben Sie die Etiketten display: inline-block;
  • Gib ihnen eine feste Breite
  • Richten Sie den Text rechts aus

Das ist:

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>
Erweitern Sie das Snippet

JSFiddle

bfavaretto
quelle
4
Wie mache ich das, wenn einige der Beschriftungen Kontrollkästchen oder Optionsfelder sind? Die Beschriftungen für diese Elemente haben dieselbe feste Breite wie die Textfeldbeschriftungen, was nicht erwünscht ist. Gibt es eine Möglichkeit, dies ohne eine feste Breite auf dem Etikett zu tun?
Rebecca Meritz
@RebeccaMeritz Du meinst, wenn das Markup zuerst das Kontrollkästchen und danach das Etikett hat? Sie können beiden eine Klasse hinzufügen und sie separat formatieren. Vielleicht sollten Sie eine neue Frage dazu stellen.
Bfavaretto
2
Wie kann man darauf reagieren? Und wie geht man mit i18n um? Ich meine, dass Textbeschriftungen in verschiedenen Sprachen unterschiedlich lang sind, daher befürchte ich, dass diese Einstellung mit fester Breite nicht funktioniert, wenn der Text lang ist.
Azimuth
@Azimuth Heutzutage möchten Sie möglicherweise stattdessen das CSS-Raster verwenden.
Bfavaretto
1
Dies markiert eine feste Breite. Sie sollte dynamisch sein und auf der maximalen Etikettenbreite basieren.
Samyak Jain
27

Während die Lösungen hier praktikabel sind, hat eine neuere Technologie zu einer meiner Meinung nach besseren Lösung geführt. Mit CSS Grid Layout können wir eine elegantere Lösung strukturieren.

Das folgende CSS bietet eine zweispaltige "Einstellungs" -Struktur, bei der erwartet wird, dass die erste Spalte eine rechtsbündige Beschriftung ist, gefolgt von einigen Inhalten in der zweiten Spalte. Kompliziertere Inhalte können in der zweiten Spalte dargestellt werden, indem sie in ein <div> eingeschlossen werden.

[Als Randnotiz: Ich verwende CSS, um das ':' hinzuzufügen, das jedem Label folgt, da dies ein Stilelement ist - meine Präferenz.]

/* 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>
Erweitern Sie das Snippet

David Rutherford
quelle
1
Hey, kannst du bitte eine Geige hinzufügen?
Stan
Ja, ich habe die Antwort aktualisiert, um Snippets zu verwenden.
David Rutherford
Mit welcher Chrome-Version und -Plattform haben Sie Probleme?
David Rutherford
1
Optimale Lösung! Funktioniert jetzt gut in Chrome 73.
Philipp Michalski
Genial! Wenn Sie die obige Spaltendefinition durch ersetzen grid-template-columns: max-content 1fr;, verwendet die zweite Spalte die gesamte verbleibende Breite. Dies ist für mich der heilige Gral solcher Layouts, bei denen keine Spalten- oder Inhaltsbreiten angegeben werden müssen und alles automatisch perfekt in den verfügbaren Platz passt.
Jeff-h
12

Wenn Sie eine solche Frage bereits beantwortet haben, können Sie sich die Ergebnisse hier ansehen:

Form erstellen, um Felder und Text nebeneinander zu haben - wie geht das semantisch?

Um die gleichen Regeln auf Ihre Geige anzuwenden, können Sie display:inline-blockIhre Beschriftung und Eingabegruppen nebeneinander anzeigen, wie folgt:

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

Geige aktualisiert

Andres Ilich
quelle
Dies ist eine sehr schöne Lösung, außer dass Sie die Breite der Etiketten fest codieren müssen. Wenn ein neues Etikett zu lang ist, wird das Layout unterbrochen. Scheint, als sollte es eine robustere Lösung geben?
Mattstuehler
8

Ich benutze etwas Ähnliches:

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

Stil:

.form-element label {
    display: inline-block;
    width: 150px;
}
Mike G.
quelle
4

Sie können auch versuchen, Flex-Box zu verwenden

<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>
user6797117
quelle
Das ist hübsch, aber überhaupt nicht das, wonach er gefragt hat. Siehe das Bild in op
phorgan1
3

Ich weiß, dass dies ein alter Thread ist, aber eine einfachere Lösung wäre, eine Eingabe wie folgt in das Label einzubetten:

<label>Label one: <input id="input1" type="text"></label>
Erweitern Sie das Snippet

Robert
quelle
Ich suchte nach einer Lösung dafür (einschließlich der Eingabe innerhalb des Etiketts), aber mit ausgerichtetem Text
Natim
0

Hier ist die allgemeine Beschriftungsbreite für alle Formularbeschriftungen. Nichts feste Breite.

Rufen Sie den setLabelWidth-Rechner mit allen Beschriftungen auf. Diese Funktion lädt alle Beschriftungen auf der Benutzeroberfläche und ermittelt die maximale Beschriftungsbreite. Wenden Sie den Rückgabewert der folgenden Funktion auf alle Beschriftungen an.

     this.setLabelWidth = function (labels) {
            var d = labels.join('<br>'),
                dummyelm = jQuery("#lblWidthCalcHolder"),
                width;
            dummyelm.empty().html(d);
            width = Math.ceil(dummyelm[0].getBoundingClientRect().width);
            width = width > 0 ? width + 5: width;
            //this.resetLabels(); //to reset labels.
            var element = angular.element("#lblWidthCalcHolder")[0];
            element.style.visibility = "hidden";
            //Removing all the lables from the element as width is calculated and the element is hidden
            element.innerHTML = "";
            return {
                width: width,
                validWidth: width !== 0
            };

        };
Samyak Jain
quelle
0

Sie können so etwas tun:

HTML:

<div class='div'>
<label>Something</label>
<input type='text' class='input'/>
<div>

CSS:

.div{
      margin-bottom: 10px;
      display: grid;
      grid-template-columns: 1fr 4fr;
}

.input{
       width: 50%;
}

Hoffe das hilft ! :) :)

Rakonjac
quelle