• 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
Zadając pytanie postaraj się o szczegółowe opisanie problemu oraz udostępnienie wszystkich istotnych informacji (kody źródłowe, zrzuty ekranu itp.).Opisanie problemu

51,902 zapytań

94,667 odpowiedzi

192,973 komentarzy

25,303 pasjonatów

Przeglądających: 282
Pasjonatów: 17 Gości: 265

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.

...