• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Div nawigacji nie chce się ułożyć w jednej linii z drugim divem

VMware Cloud PRO - przenieś swoją infrastrukturę IT do chmury
0 głosów
751 wizyt
pytanie zadane 11 maja 2021 w HTML i CSS przez bazyl8796 Obywatel (1,020 p.)

Cześć,
kompletnie nie mam pojęcia dlaczego div nawigacji nie chce "przepuścić" do linii w której się znajduje drugiego diva pomimo, że wszystko jest niby dobrze. Gdy usuwam marginesy, w divie z nawigacją i dodaję "float:left" to niby wszystko działa, ale gdy znów próbuję wyśrodkować to 2 div przeskakuje do dolnej linijki :/.
Proszę o pomoc i pozdrawiam!

<div class="topbar">
		<div class="menu">
				<ol class="topmenu">
					<li> <a href="#">Strona Główna</a></li>
					<li> <a href="#">Wsparcie</a></li>
					<li> <a href="#">Kontakt</a></li>
					<li> <a href="#">Współpraca</a></li>
				</ol>
		</div>
		<div id="color-adjust">
			<i class="icon-color-adjust"></i>
		</div>
.menu
{ 
	width: 50%;
	padding: 10px 0;
	background-color:rgb(66, 80, 156);
	border-bottom: 1px solid rgb(38, 46, 90);
	border-left: 1px solid rgb(38, 46, 90);
	border-right: 1px solid rgb(38, 46, 90);
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
	text-align: center;
	margin-left:auto;
	margin-right: auto;
}
.menu ol
{
	padding: 0px;
	margin: 0;
	list-style-type: none;
	font-size: 15px;
	height: 20px;
	display: inline-block;
}
.menu ol a
{
	color: #ffffff;
	text-decoration: none;
	display: block;
	padding:0px 20px;
}
.menu ol > li
{
	float: left;
}
#color-adjust
{
	float:right;
	font-size:20px;
	height: 30px;
	width: 30px;
	color:white;
	background-color:rgb(66, 80, 156);
	border-radius:7px;
	margin-right: 20px;
}

 

2 odpowiedzi

+3 głosów
odpowiedź 11 maja 2021 przez SzkolnyAdmin Szeryf (89,770 p.)
wybrane 11 maja 2021 przez bazyl8796
 
Najlepsza
W jaki sposób pozycjonujesz bloki w bloku o klasie " topbar "? Dla tego bloku daj display:flex i powinno być dobrze. Poczytaj o Flexible box (flebox).
komentarz 11 maja 2021 przez bazyl8796 Obywatel (1,020 p.)
dzięki wielkie :D
+3 głosów
odpowiedź 11 maja 2021 przez ScriptyChris Mędrzec (190,190 p.)

Jeśli już używasz float to oba elementy powinny mieć go ustawionego na wartość left.

Ale zapomnij o układaniu layoutów za pomocą float i użyj tutaj flexboxa.

Podobne pytania

0 głosów
1 odpowiedź 1,184 wizyt
pytanie zadane 15 lutego 2017 w HTML i CSS przez remo82 Użytkownik (560 p.)
0 głosów
1 odpowiedź 566 wizyt
pytanie zadane 7 czerwca 2016 w HTML i CSS przez Matiofficjal Początkujący (360 p.)
0 głosów
0 odpowiedzi 316 wizyt
pytanie zadane 16 maja 2016 w C i C++ przez Philip Bywalec (2,320 p.)

93,443 zapytań

142,434 odpowiedzi

322,691 komentarzy

62,805 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

...