• 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
201 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 Pasjonat (18,340 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 Pasjonat (18,340 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 (21,100 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 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ź 11 października 2017 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 12 października 2017 przez zgrybus Pasjonat (21,100 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 (21,100 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

+1 głos
4 odpowiedzi 104 wizyt
pytanie zadane 4 maja 2015 w HTML i CSS przez Include Nowicjusz (200 p.)
0 głosów
2 odpowiedzi 78 wizyt
pytanie zadane 22 czerwca 2017 w HTML i CSS przez Mateusz Bogumił Obywatel (1,360 p.)
0 głosów
1 odpowiedź 141 wizyt
pytanie zadane 29 kwietnia 2016 w PHP, Symfony, Zend przez GaCeL Dyskutant (7,630 p.)
Porady nie od parady
Pytania na temat serwisu SPOJ należy zadawać z odpowiednią kategorią dotyczącą tej strony.
Ciekawy innych porad? Odwiedź tę stronę!

45,544 zapytań

85,864 odpowiedzi

171,319 komentarzy

22,052 pasjonatów

Przeglądających: 313
Pasjonatów: 24 Gości: 289

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.

...