• 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
158 wizyt
pytanie zadane 11 października 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 11 października przez shotokan Mądrala (6,970 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 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 11 października przez shotokan Mądrala (6,970 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 przez zgrybus Pasjonat (15,880 p.)
O tak to powinno wyglądać

https://codepen.io/anon/pen/XeBpGO
0 głosów
odpowiedź 11 października 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 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 przez zgrybus Pasjonat (15,880 p.)
ten margin-left: 853px; to chyba dla żartów? :)
komentarz 12 października przez adrian588 Początkujący (440 p.)
To jak to powinno wyglądać?
komentarz 12 października przez zgrybus Pasjonat (15,880 p.)
masz odpowiedź wyżej :)
komentarz 18 godziny temu przez adrian588 Początkujący (440 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 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ź 116 wizyt
pytanie zadane 29 kwietnia 2016 w PHP, Symfony, Zend przez GaCeL Dyskutant (7,590 p.)

39,718 zapytań

78,161 odpowiedzi

153,596 komentarzy

18,778 pasjonatów

Przeglądających: 176
Pasjonatów: 8 Gości: 168

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.

...