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

question-closed Rozciąganie menu

VPS Starter Arubacloud
0 głosów
604 wizyt
pytanie zadane 11 lipca 2018 w HTML i CSS przez Frezen Obywatel (1,330 p.)
zamknięte 11 lipca 2018 przez Frezen

Witam. Już dawno nie robiłem stron dlatego mam do was pytanie o trywialną rzecz. Mam stronę w której chce rozciągnąć menu tzn. żeby było na całą szerokość kontenera. Oczywiście wiem że dla ul można dać 100% a dla każdego li 20%, ale to mi nie załatwia sprawy bo każdy odnośnik menu ma różną wielkość więc w takich proporcjach chciałbym rozciągnąć te menu.

Strona zrobiona do pokazania problemu. 

Kod: 

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	
	<title>abc</title>
	
	<meta name="description" content="Opis w Google" />
	<meta name="keywords" content="słowa, kluczowe, wypisane, po, porzecinku" />
	<link rel="stylesheet" type="text/css" href="style.css">


</head>

<body>
	<div class="container"> 
		<div class="logo"> </div>
		<nav>
			<div class="menu">
				<ul>
					<li><a href="#">Jakieś pole</a></li>
					<li><a href="#">Jakieś drugie pole</a></li>
					<li><a href="#">pole</a></li>
					<li><a href="#">czwarte pole</a></li>
					<li><a href="#">koniec menu</a></li>
				</ul>
			</div>
		</nav>
	</div>
</body>
</html>

 

.container {	
	width: 1080px;
	margin: 0 auto;
}

.logo {
	background-color: yellow;
	width: 100%;
	height: 100px;
}

nav {
	display:block;
	text-transform: uppercase;
	margin: 0 auto;
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

ul li {
	float: left;
	position: relative;
	background-color: green;
}

ul li a {
	display: block;
	padding: 10px 20px;
	text-decoration: none;
	color: white;
}

 

komentarz zamknięcia: Rozwiązane
komentarz 11 lipca 2018 przez Mariusz08 Maniak (62,300 p.)
Zły język bloczka z kodem
komentarz 11 lipca 2018 przez Frezen Obywatel (1,330 p.)

Rozwiązałem sam problem użyłem do tego po prostu flexboxa.

1 odpowiedź

0 głosów
odpowiedź 11 lipca 2018 przez pablop76 VIP (123,060 p.)

Ostatnio był podobny problem i podałem rozwiązanie dla 

inline-block

Podobne pytania

0 głosów
1 odpowiedź 113 wizyt
pytanie zadane 17 kwietnia 2018 w HTML i CSS przez P0Y3B Nowicjusz (220 p.)
0 głosów
1 odpowiedź 556 wizyt
pytanie zadane 22 czerwca 2017 w HTML i CSS przez ethern Nowicjusz (150 p.)
+1 głos
1 odpowiedź 117 wizyt
pytanie zadane 19 czerwca 2016 w HTML i CSS przez PieroQQ Początkujący (420 p.)

92,455 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 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.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...