Mam formularza HTML, takich jak:Align HTML wejściowe pola według:

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

Teraz etykiety wszyscy zaczynają w tej samej kolumnie, ale pola tekstowe zaczynają w różnych pozycjach, jak na długość tekstu etykiety.

Czy istnieje sposób wyrównania pól wprowadzania, tak aby wszystkie ":" i pola tekstowe zaczynały się w tej samej pozycji, a poprzedni tekst będzie wyrównany do prawej, aż do ":"?

Używanie CSS jest w porządku, jeśli może to pomóc w osiągnięciu tego.

Źródło

2012-06-03 Sankar P

Gdzie jest forma? Widzę kontrole formularzy, ale nie formularze. –

To tylko pseudo fragment kodu. Załóżmy, że masz formularz wewnątrz znacznika html. –

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

Źródło

2012-06-03 07:56:55 DaneSoul

nie działa dla mnie ... – Ben

Czy istnieje sposób, aby to zrobić bez konieczności określenia bezwzględnej szerokości? – Ajedi32

Ajedi32, Możesz użyć względnej szerokości (%), spójrz tutaj: http://jsfiddle.net/T6zhj/293/. Ale musisz ustawić taką samą szerokość dla wszystkich etykiet w jakiś sposób, ponieważ musisz dopasować je do prawej. – DaneSoul

Można użyć etykietą (patrz 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>

Albo można używać tych etykiet w tabeli (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>

Źródło

2012-06-03 07:38:34

Dodatkowo, za pomocą 'etykiety' otrzymasz wiele miłych funkcji ułatwień dostępu: możesz kliknąć, aby przejść do skojarzonej z nią kontrolki, a czytelnicy ekranu będą w stanie rozpoznać twój formularz. 'table's dla layoutu nic ci z tego nie zrobi. –

@MattiasBuelens: ale tabela przyjmie pierwszą kolumnę do szerokości etykiet. F.e. w przypadku witryny wielojęzycznej, w której dynamicznie można uzyskać podpis etykiety, można ustawić td w pierwszej kolumnie na nowszą wersję ... Więc nie upuszczaj jeszcze tabel, mają one swoje zastosowanie –

@wouterHuysentruit To jest to, czego szukam, ale nie ma spacji między polami w przykładzie CSS. Jak to może zostać naprawione? –

Ustaw szerokość na elemencie formularza (który powinien istnieć w twoim przykładzie!) i unosić (i czyścić) elementy wejściowe. Również upuść elementy br.

Źródło

2012-06-03 07:43:39

w moim przypadku zawsze umieścić te spożywczych w znaczniku P jak

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

i tak dalej, a następnie zastosowanie css jak

p { 
    text-align:left; 
} 

p input { 
    float:right; 
}

musisz określić szerokość p tag.because tagów wejściowych będzie unosić się przez całą drogę w prawo.

Ten parametr będzie również wpływał na przycisk przesyłania. Musisz zastąpić regułę dla tego tagu.

Źródło

2012-06-03 08:13:11 maksbd19

Wiem, że to podejście zostało podjęte wcześniej, Ale uważam, że przy użyciu tabel, układ może być generowany z łatwością, Chociaż ten może nie być najlepszą praktyką.

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

Źródło

2013-07-09 03:51:56 IcyFlame

To wciąż lepsze niż określanie szerokości absolutnie – velop

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

Korzystanie wyświetlacz table-cell/wiersz będzie wykonać zadanie bez szerokości potrzebne.

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>

CSS:

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

Źródło

2014-10-23 08:51:33 vonwa

przykład: http://jsfiddle.net/35sm3jsk/ – ishayle

Właśnie podano szerokość na etykiecie i typ wejścia były wyrównane automatycznie.

input[type="text"] { 
 
    width:100px; 
 
\t height:30px; 
 
\t border-radius:5px; 
 
\t background-color: lightblue; 
 
\t 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>

Źródło

2015-06-26 15:25:30 Parul

Align HTML wejściowe pola według:

Odpowiedz

HTML

CSS

Powiązane problemy