Wyrównaj elementy formularza w css

Jestem nowy w css i mam prosty formularz logowania, który próbuję poprawnie wyrównać. Zasadniczo dwie kolumny z etykietami i przycisk Logowanie w jednej kolumnie i pola tekstowe w innej kolumnie. Jak zrobić to w css?Wyrównaj elementy formularza w css

Kod HTML jest

<body> 
    <form action="" method="post"> 
    <label> Username </label> 
    <input type="text"/> 

    <label> Password </label> 
    <input type="password"/> 

    <input type="submit" value="submit"/> 
    </form> 
</body>

Źródło

2012-11-02 DavidL

Po wprowadzeniu wpisz hasło i nazwę użytkownika po prostu dodaj
. – Vucko

To jedno podejście, które działa:

form { 
    width: 80%; 
    margin: 0 auto; 
} 

label, input { 
    /* in order to define widths */ 
    display: inline-block; 
} 

label { 
    width: 30%; 
    /* positions the label text beside the input */ 
    text-align: right; 
} 

label + input { 
    width: 30%; 
    /* large margin-right to force the next element to the new-line 
     and margin-left to create a gutter between the label and input */ 
    margin: 0 30% 0 4%; 
} 

/* only the submit button is matched by this selector, 
    but to be sure you could use an id or class for that button */ 
input + input { 
    float: right; 
}

JS Fiddle demo.

Dostosuj wymiary i marginesy do własnych potrzeb i estetyki.

Źródło

2012-11-02 22:45:39

@Jacob: dziękuję! To była prawdopodobnie dość myląca wypowiedź przededycyjna! XD –

znowu człowiek - ładne imię @DaveThomas –

Za to, o co prosisz, po prostu wsadzę je do stolika.

<form action="" method="post"> 
    <table> 
     <tr> 
      <td><label> Username </label></td> 
      <td><input type="text"/></td> 
     </tr> 
     <tr> 
      <td><label> Password </label></td> 
      <td> <input type="password"/></td> 
     </tr> 
     <tr> 
      <td colspan="2"><input type="submit" value="submit"/></td> 
     </tr> 
    </table> 
    </form>

Oto, co to będzie wyglądać http://jsfiddle.net/wCSAn/

Źródło

2012-11-02 22:53:24 TheLawrence

+10

To nie są dane tabelaryczne, więc nie powinno być w tabeli – Neil

Pytanie zadane, jak to zrobić w CSS. Choć tabele są kuszące, ponieważ wykonują zadanie, nie jest to dobra praktyka. –

Istnieją rzędy i kolumny - jest to stół. – dcromley

odpowiedziałem na to pytanie w moim blogu: https://wscherphof.wordpress.com/2015/06/17/right-align-form-elements-with-css/

Odnosi się do tego ryba: https://jsfiddle.net/wscherphof/9sfcw4ht/9/

Spoiler: float: right; jest prawo kierunek, ale potrzeba trochę więcej uwagi, aby uzyskać dobre wyniki.

Źródło

2015-06-18 18:50:11 user2389922

+1 za zapewnienie 4 różnych podejść, ładnie uporządkowane i wyjaśnione. Jednak jeśli te linki umrą, ta odpowiedź będzie bezużyteczna. Poświęć chwilę, aby krótko opisać swoje rozwiązania w odpowiedzi bezpośrednio. –

Wyrównaj elementy formularza w css

Odpowiedz

Powiązane problemy