wake-up-neo.net

Wie füge ich gleichmäßig Abstand zwischen einem Label und dem Eingabefeld hinzu, unabhängig von der Textlänge?

Nehmen wir an, ich habe 10 Eingabefelder und vor den Eingabefeldern auf der linken Seite habe ich den span-Tag, der den Text enthält, um anzuzeigen, was der Benutzer in das Feld eingeben soll. Ich habe ein paar Sachen gemacht, aber ich bin nicht sicher, wie ich zwischen dem span-Tag und dem Eingabefeld Leerzeichen hinzufügen sollte, unabhängig davon, wie groß der Text ist. 

So was:

enter image description here

cssformscss3html
13
starbucks

Verwenden Sie label anstelle von span. Es ist für die Kombination mit Eingaben gedacht und behält einige zusätzliche Funktionen bei (das Klicken auf das Etikett fokussiert die Eingabe).

Das könnte genau das sein, was Sie wollen:

HTML:

<label for="dummy1">title for dummy1:</label>
<input id="dummy1" name="dummy1" value="dummy1">

<label for="dummy2">longer title for dummy2:</label>
<input id="dummy2" name="dummy2" value="dummy2">

<label for="dummy3">even longer title for dummy3:</label>
<input id="dummy3" name="dummy3" value="dummy3">

CSS:

label {
    width:180px;
    clear:left;
    text-align:right;
    padding-right:10px;
}

input, label {
    float:left;
}

jsfiddle DEMO hier.

17
Petr Čihula

Dies kann mit dem brandneuen CSS display: grid ( browser support ) erreicht werden.

HTML:

<div class='container'>
  <label for="dummy1">title for dummy1:</label>
  <input id="dummy1" name="dummy1" value="dummy1">
  <label for="dummy2">longer title for dummy2:</label>
  <input id="dummy2" name="dummy2" value="dummy2">
  <label for="dummy3">even longer title for dummy3:</label>
  <input id="dummy3" name="dummy3" value="dummy3">
</div>

CSS:

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

Bei Verwendung von CSS-Raster werden Elemente standardmäßig Spalte für Spalte und Zeile für Zeile angeordnet. Die grid-template-columns-Regel erstellt zwei Gitterspalten, von denen eine 1/4 der gesamten horizontalen Fläche und die andere 3/4 der horizontalen Fläche einnimmt. Dies schafft den gewünschten Effekt.

 grid

JS-FIDDLE

4
0xcaff

Sie können eine Tabelle verwenden

<table class="formcontrols" >   
    <tr>
        <td>
            <label for="Test">FirstName:</label>
        </td>
        <td  style="padding-left:10px;">
            <input id="Test" name="Test" value="John">
        </td>
    </tr>
    <tr>
        <td>
            <label for="Test">Last name:</label>
        </td>
        <td  style="padding-left:10px;">
            <input id="lastName" name="lastName" value="Travolta">
        </td>
    </tr>
</table>

Das Ergebnis wäre: ImageResult

2
Jorciney

Sie können auch den folgenden Code verwenden 

<html>
<head>
    <style>
        .labelClass{
            float: left;
            width: 113px;
        }
    </style>
</head>
<body>
  <form action="yourclassName.jsp">
    <span class="labelClass">First name: </span><input type="text" name="fname"><br>
    <span class="labelClass">Last name: </span><input type="text" name="lname"><br>
    <input type="submit" value="Submit">
  </form>
</body>
</html>
2
Divyesh Rupawala