Stylizacja formularzy w HTML i CSS

Question

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?

Comments

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

---

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.

---

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)

Answer 1

O tak to powinno wyglądać

https://codepen.io/anon/pen/XeBpGO

Answer 2

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

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

 

Answer 3

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;
}

 

Comments

ten margin-left: 853px; to chyba dla żartów? :)

---

To jak to powinno wyglądać?

---

masz odpowiedź wyżej :)

---

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:/