Ustawienie elementu (godziny pracy sklepu) jeden pod drugim

Question

Cześć,

Jak najłatwiej ustawić element (godzina) jeden pod drugim w jednej prostej linii?
Rozumiem, że sposób którym próbowałem to zrobić jest bezsensu (proszę się nie śmiać)
Trzeba to robić na jakiś osobnych divach czy jak?

 

<div id="kontaktframe2">
				<p class="italic">Godziny otwarcia:<p>

				Poniedziałek &nbsp; 09:00 - 17:00<br>
				Wtorek &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;09:00 - 17:00<br>
				Środa &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 09:00 - 17:00<br>
				Czwartek &nbsp; &nbsp; &nbsp; &nbsp;08:00 - 16:00<br>
				Piątek &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;09:00 - 17:00<br>
				Sobota &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;09:00 - 13:00<br>
				Niedziela &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Zamknięte<br>
			</div>

Z poważaniem,
Michał

Answer 1

Użyj flexboxa i daj mu kierunek kolumn

Answer 2

Najlepiej każdy dzień tygodnia żeby był w osobnym divie dodatkowo dzień tygodnia i godziny żeby też były jeszcze w osobnych divach.

Przykładowy kod HTML

<div class="wrapper">
	<div class="row">
		<div>Poniedziałek</div>
		<div>8:00 - 18:00</div>
	</div>

	<div class="row">
		<div>Wtorek</div>
		<div>8:00 - 18:00</div>
	</div>
</div>

I CSS

.wrapper {
	max-width: 200px;
}

.row {
	display: flex;
	justify-content: space-between;
}

Max-width można ustalić według uznania na ile szeroka ma być całość.

Display: flex ustawi nam nazwę dnia oraz godzinę w jednej linii a justify-content: space-between ustawi elementy na skrajnych końcach zostawiając przestrzeń po środku.

Answer 3

Możesz użyć znacznika <table> oraz <tr> i <td> czyli stworzyć tabelkę na swojej stronie www.