HTML-Eingabefelder ausrichten nach : [duplicate]

Question 1

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 die Beschriftungen alle in derselben Spalte, aber die Textfelder beginnen an unterschiedlichen Positionen gemäß der Textlänge der Beschriftung.

Gibt es eine Möglichkeit, die Eingabefelder so auszurichten, dass alle “:” und die Textfelder an derselben Position beginnen und der vorangehende Text bis zum “:” rechtsbündig ausgerichtet wird?

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

Question 2

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

Question 3

Sie könnten ein Etikett 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 Beschriftungen 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>

Question 4

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

Die Verwendung von Anzeigetabellenzellen/-zeilen erledigt die Aufgabe, ohne dass eine Breite erforderlich ist.

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

Question 5

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

Question 6

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

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

Question 7

In meinem Fall lege ich diese Sachen immer in ein ap-Tag wie

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

und so weiter und dann das CSS wie anwenden

p {
  text-align:left;
}

p input {
  float:right;
}

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

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

Question 8

Ich habe dem Label gerade 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>