• 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
343 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 (34,980 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 (34,980 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,940 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 (24,940 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,940 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 109 wizyt
pytanie zadane 4 maja 2015 w HTML i CSS przez Include Nowicjusz (200 p.)
0 głosów
2 odpowiedzi 87 wizyt
pytanie zadane 22 czerwca 2017 w HTML i CSS przez Mateusz Bogumił Obywatel (1,380 p.)
0 głosów
1 odpowiedź 166 wizyt
pytanie zadane 29 kwietnia 2016 w PHP, Symfony, Zend przez GaCeL Dyskutant (7,590 p.)
Porady nie od parady
Wynikowy wygląd pytania, odpowiedzi czy komentarza, różni się od tego zaprezentowanego w edytorze postów. Stosuj więc funkcję Podgląd posta znajdującą się pod edytorem, aby upewnić się, czy na pewno ostateczny rezultat ci odpowiada.Podgląd posta

54,454 zapytań

98,349 odpowiedzi

202,297 komentarzy

26,748 pasjonatów

Przeglądających: 275
Pasjonatów: 15 Gości: 260

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.

...