Naprawa właściwości padding.

pytanie zadane 8 lutego 2017 w HTML i CSS przez YerbaMate Nowicjusz (220 p.)
zmienione kategorie 8 lutego 2017 przez Arkadiusz Waluk

Tworzę menu w html i css i szukam sposobu na naprawienie właściwości padding. Chodzi o to ,aby żółty kolor nie wychodził poza dolną linię ,jednocześnie aby tekst znajdował się po środku.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="Stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<header>
<ol id="menu">
  <li><a href="#l">pomidor</a></li>
  <li><a href="#">marchew</a></li>
  <li><a href="#">kokos</a></li>
  <li><a href="#">buty</a></li>
  <li><a href="#">spodnie</a></li>
  <li><a href="#">bluza</a></li>
  <li><a href="#">#</a></li>
</ol>

</header>
<main>
</main>
<footer>
</footer>
</body>
</html>

body {
	margin:0;
	padding:0;
	font-family:San Francisco ,sans-serif;
}
#menu {
	margin:0;
	padding:0;
	width:100%;
	height:30px;
	list-style-type:none;
	border-bottom:1px solid #BDBDBD;
}
#menu:after {
  content:'';
  display:block;
  clear:both;
}
#menu > li {
	float:left;
	height:30px;
	width:10%;
	margin-right:4%;
}
#menu > li > a {
	text-decoration:none;
	color:#BDBDBD;
	display:block;
	height:100%;
	text-align:center;
	padding-top:5px;
	background-color:yellow;
}
#menu > li:hover {
	border-bottom:1px solid red;
}
#menu > li > a:hover {
	color:red;
}

Dla ułatwienia zdjęcie

1 odpowiedź

odpowiedź 8 lutego 2017 przez mordimer Mądrala (5,720 p.)
wybrane 8 lutego 2017 przez YerbaMate

Najlepsza

Witam do #menu > li > a {box-sizing: border-box;} dodaj coś takiego ... tu masz działajace rozwiazanie https://jsfiddle.net/mordimer/15e4hohx/ pozdrawiam.