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

question-closed Rozciąganie menu

0 głosów
57 wizyt
pytanie zadane 5 dni temu w HTML i CSS przez Frezen Obywatel (1,330 p.)
zamknięte 5 dni temu 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 5 dni temu przez Mariusz08 Nałogowiec (36,340 p.)
Zły język bloczka z kodem
komentarz 5 dni temu 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ź 5 dni temu przez pablop76 Maniak (56,580 p.)

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

inline-block

Podobne pytania

0 głosów
1 odpowiedź 40 wizyt
pytanie zadane 17 kwietnia w HTML i CSS przez P0Y3B Nowicjusz (140 p.)
0 głosów
1 odpowiedź 85 wizyt
pytanie zadane 22 czerwca 2017 w HTML i CSS przez ethern Nowicjusz (150 p.)
+1 głos
1 odpowiedź 68 wizyt
pytanie zadane 19 czerwca 2016 w HTML i CSS przez PieroQQ Początkujący (420 p.)
Porady nie od parady
Możesz ukryć, zamknąć lub zmodyfikować swoje pytanie, za pomocą przycisków znajdujących się pod nim. Nie krępuj się poprawić pochopnie opublikowanego pytania czy zamknąć go po uzyskaniu satysfakcjonującej odpowiedzi. Umożliwi to zachowanie porządku na forum.Przyciski pytania

51,903 zapytań

94,667 odpowiedzi

192,976 komentarzy

25,303 pasjonatów

Przeglądających: 323
Pasjonatów: 16 Gości: 307

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.

...