it-swarm.com.de

HTML-Eingabefelder ausrichten nach:

Ich habe ein HTML-Formular wie:

 <html>
  Name:<input type="text"/></br>
  Email Address:<input type="text"/></br>
  Description of the input value:<input type="text"/></br>
 </html>

Jetzt beginnen alle Beschriftungen in derselben Spalte, aber die Textfelder beginnen an unterschiedlichen Positionen, je nach Textlänge der Beschriftung.

Gibt es eine Möglichkeit, die Eingabefelder so auszurichten, dass alle ":" - und Textfelder an derselben Position beginnen und der vorhergehende Text bis zum ":" rechts ausgerichtet wird?

Ich bin mit der Verwendung von CSS einverstanden, wenn dies dazu beitragen kann.

54
Sankar

Working JS Fiddle

HTML:

  <div>
      <label>Name:</label><input type="text">
      <label>Email Address:</label><input type = "text">
      <label>Description of the input value:</label><input type="text">
  </div>

CSS:

label{
    display: inline-block;
    float: left;
    clear: left;
    width: 250px;
    text-align: right;
}
input {
  display: inline-block;
  float: left;
}
92
DaneSoul

Sie könnten ein Label verwenden (siehe JsFiddle )

[~ # ~] CSS [~ # ~]

label { display: inline-block; width: 210px; text-align: right; }

[~ # ~] html [~ # ~]

<html> 
    <label for="name">Name:</label><input id="name" type="text"><br />
    <label for="email">Email Address:</label><input id="email" type="text"><br /> 
    <label for="desc">Description of the input value:</label><input id="desc" type="text"><br /> 
 </html> 

Oder Sie könnten diese Bezeichnungen in einer Tabelle verwenden ( JsFiddle )

<html>
    <table>
        <tbody>
            <tr><td><label for="name">Name:</label></td><td><input id="name" type="text"></td></tr>
            <tr><td><label for="email">Email Address:</label></td><td><input id="email" type = "text"></td></tr>
            <tr><td><label for="desc">Description of the input value:</label></td><td><input id="desc" type="text"></td></tr>
        </tbody>
    </table>
 </html> 
18
huysentruitw

Legen Sie eine Breite für das Formularelement fest (die in Ihrem Beispiel vorhanden sein sollte!) Und verschieben (und löschen) Sie die Eingabeelemente. Lassen Sie auch die br-Elemente fallen.

3
Madara Uchiha

in meinem fall habe ich diese sachen immer in ein p-tag wie gesetzt

<p> name : < input type=text /> </p>

und so weiter und dann das CSS anwenden wie

p {
  text-align:left;
}

p input {
  float:right;
}

Sie müssen die Breite des p-Tags angeben, da die Eingabe-Tags ganz nach rechts verschoben werden.

Dieses CSS wirkt sich auch auf die Senden-Schaltfläche aus. Sie müssen die Regel für dieses Tag überschreiben.

2
maksbd19

Ich weiß, dass dieser Ansatz schon früher gewählt wurde, aber ich glaube, dass das Layout mithilfe von Tabellen leicht generiert werden kann, obwohl dies möglicherweise nicht die beste Vorgehensweise ist.

JSFiddle

HTML

<table>

    <tr><td>Name:</td><td><input type="text"/></td></tr>

    <tr><td>Age:</td><td><input type="text"/></td></tr>

</table>

<!--You can add the fields as you want-->

CSS

td{
    text-align:right;
}
1
IcyFlame

http://jsfiddle.net/T6zhj/1/

Bei Verwendung der Anzeigetabelle Zelle/Zeile wird die Arbeit ohne die erforderliche Breite ausgeführt.

Das HTML:

 <html>
  <div>
      <div class="row"><label>Name:</label><input type="text"></div>
      <div class="row"><label>Email Address:</label><input type = "text"></div>
      <div class="row"><label>Description of the input value:</label><input type="text"></div>
  </div>
 </html>

Das CSS:

label{
    display: table-cell;
    text-align: right;
}
input {
  display: table-cell;
}
div.row{
    display:table-row;
}
1
vonwa

Ich habe gerade der Beschriftung eine Breite gegeben und der Eingabetyp wurde automatisch ausgerichtet.

input[type="text"] {
    width:100px;
        height:30px;
        border-radius:5px;
        background-color: lightblue;
        margin-left:2px;
  position:relative;
}

label{
position:relative;
width:300px;
border:2px dotted black;
margin:20px;
padding:5px;
font-family:AR CENA;
font-size:20px;

}
<label>First Name:</label><input type="text" name="fname"><br>
<label>Last Name:</label><input type="text" name="lname"><br>
1
Parul