• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Stylizacja formularzy w HTML i CSS

0 głosów
152 wizyt
pytanie zadane 6 dni temu w HTML i CSS przez adrian588 Początkujący (440 p.)
Witam serdecznie.

Mam diva z formularzem. Wygląda to coś takiego:

 

tekst  - input

tekst  - input

tekst  - input

tekst  - input

text - select

 

Jak wystylizować aby text był po lewej a inputy po prawej?

Czy muszę każdego inputa dawać w diva? I jeszcze korzystać z komendy float:lest i clear:both?

Jest jakieś wygodniejsze rozwiazanie?
komentarz 6 dni temu przez shotokan Mądrala (6,870 p.)

Chodzi Ci o takie coś?
 

	<form>
		Wpisz coś:
		<input type="text" name="pole1"><br>
		Wpisz coś:
		<input type="text" name="pole2"><br>
		Wpisz coś:
		<input type="text" name="pole3"><br>
		Wpisz coś:
		<input type="text" name="pole4"><br>
		Zatwierdź:
		<input type="submit" name="przycisk" value="Zatwierdź">
	</form>

tekst jest po lewej a inputy po prawej

komentarz 6 dni temu przez adrian588 Początkujący (440 p.)
Tak tylko inputy są po prawej stronie tekstu to ok.. ale żeby przyciągało je do prawej części ekranu. Czyli tego DIVA

 Mam Div o szerokośći 1000px

tekst ma być przyklejony do lewej a inputy do prawej.

Po środku przerwa.
komentarz 6 dni temu przez shotokan Mądrala (6,870 p.)

Można zastosować flexboxa, albo tak jak piszesz float, tylko ja to bym skrócił tak:
kod jak powyżej a css:
 

	<style>
		input {
			float:right;
		}
		br {
			clear:both;
		}
	</style>

czyszczenie float jest po br bo w przykładzie występuje (oczywiście w całościowym rezultacie br nie jest dobrym rozwiązaniem)

3 odpowiedzi

+2 głosów
odpowiedź 5 dni temu przez zgrybus Pasjonat (15,840 p.)
O tak to powinno wyglądać

https://codepen.io/anon/pen/XeBpGO
0 głosów
odpowiedź 6 dni temu przez Przemo_J Nowicjusz (240 p.)

Dobra alternatywa to dodać do labela i inputa styl display: inline-block.

#rodzic label, #rodzic input  { display: inline-block }

 

0 głosów
odpowiedź 6 dni temu przez Przemo_J Nowicjusz (240 p.)

Sposób z użyciem float: left tylko dla labela:

#container {
  width: 1000px;
  background: #aaa;
  min-height: 140px;
}
#container label {
  float: left;
}
#container input {
  display: block;
  margin-left: 853px;
}

 

komentarz 6 dni temu przez zgrybus Pasjonat (15,840 p.)
ten margin-left: 853px; to chyba dla żartów? :)
komentarz 5 dni temu przez adrian588 Początkujący (440 p.)
To jak to powinno wyglądać?
komentarz 5 dni temu przez zgrybus Pasjonat (15,840 p.)
masz odpowiedź wyżej :)

Podobne pytania

+1 głos
4 odpowiedzi 99 wizyt
pytanie zadane 4 maja 2015 w HTML i CSS przez Include Nowicjusz (200 p.)
0 głosów
2 odpowiedzi 71 wizyt
pytanie zadane 22 czerwca w HTML i CSS przez Mateusz Bogumił Użytkownik (860 p.)
0 głosów
1 odpowiedź 115 wizyt
pytanie zadane 29 kwietnia 2016 w PHP, Symfony, Zend przez GaCeL Dyskutant (7,590 p.)

39,655 zapytań

78,028 odpowiedzi

153,336 komentarzy

18,707 pasjonatów

Przeglądających: 151
Pasjonatów: 3 Gości: 148

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...