Rozciąganie menu

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