• 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

VPS Starter Arubacloud
0 głosów
1,290 wizyt
pytanie zadane 11 października 2017 w HTML i CSS przez adrian588 Początkujący (470 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 11 października 2017 przez shotokan Nałogowiec (39,660 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 11 października 2017 przez adrian588 Początkujący (470 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 11 października 2017 przez shotokan Nałogowiec (39,660 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ź 12 października 2017 przez zgrybus Pasjonat (24,860 p.)
O tak to powinno wyglądać

https://codepen.io/anon/pen/XeBpGO
0 głosów
odpowiedź 11 października 2017 przez Przemo_J Początkujący (320 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ź 11 października 2017 przez Przemo_J Początkujący (320 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 12 października 2017 przez zgrybus Pasjonat (24,860 p.)
ten margin-left: 853px; to chyba dla żartów? :)
komentarz 12 października 2017 przez adrian588 Początkujący (470 p.)
To jak to powinno wyglądać?
komentarz 12 października 2017 przez zgrybus Pasjonat (24,860 p.)
masz odpowiedź wyżej :)
komentarz 19 października 2017 przez adrian588 Początkujący (470 p.)
Proszę zerknąć na stronę:

http://kalkulatoryinzynierskie.pl/zakotwienieEC.php

Niestety po wstawieniu powyższego wcale nie wygląda to dobrze.

Może ktoś poda działający przykład lub wskaże gdzie robię błąd?

Chcę jakoś równo poukładać napisy i inputy:/

Podobne pytania

0 głosów
2 odpowiedzi 473 wizyt
+1 głos
4 odpowiedzi 203 wizyt
pytanie zadane 4 maja 2015 w HTML i CSS przez Include Nowicjusz (200 p.)
0 głosów
2 odpowiedzi 453 wizyt
pytanie zadane 17 października 2019 w HTML i CSS przez vingilot85 Obywatel (1,150 p.)

92,452 zapytań

141,262 odpowiedzi

319,078 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...