Dla czego ostatnie <li> przeskakuje do nowej lini

pytanie zadane 2 stycznia 2019 w HTML i CSS przez DEVO-SON Początkujący (260 p.)

Siema, mam problem z menu ostatnia cześć listy nie trzyma się Lini przeskakuje do następnej wiersza jak to zmienić?

tutaj kod:

<!DOCTYPE html>
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		
		<style type="text/css">
			body {
				width: 100%;
				font-family: Arial, Verdana, sans-serif;
				color: #665544;}
			#top {
				position: fixed;
				top: 0px;
				left: 0px;
				margin: 0px;
				padding: 10px;
				width: 100%;
				height: 10%;
				background-color: #031634;
				z-index: 10;}
			#top .logo{
			    color: #E8DDCB;
				font-size: 30px;
				margin: 0.5%;
				padding: 0.5%;
				position: right;
				text-transform: uppercase;
				}
            #top ul{
		        float: right;
				list-style: none;
				margin: 1%;
			    padding: 1%;
				font-size: 15px;
				color: #E8DDCB;
				text-transform: uppercase;}
			#top li{
			    display: inline;
			    border-style: solid;
			    border-color: #E8DDCB;
				padding-top: 0.5%;
                padding-bottom: 0.5%;
                padding-right: 2%;
                padding-left: 2%;}
			   
			
			</style>
	</head>
	<body>
		<div id="top">
		    <ul>
                <li>Home</li>
                <li>Rekrutacja</li>
                <li>Profil Kierowcy</li>
				<li>Kontakt</li>
				<li>Regulamin</li>
            </ul>
		   
		
		</div>

	
</body></html>

2 odpowiedzi

odpowiedź 2 stycznia 2019 przez jaca121212 Nałogowiec (40,760 p.)
wybrane 3 stycznia 2019 przez DEVO-SON

Najlepsza

https://codepen.io/anon/pen/MZrzBe

Drobne poprawki.

komentarz 3 stycznia 2019 przez pablop76 VIP (123,120 p.)
edycja 3 stycznia 2019 przez pablop76

elementy liniowe z właściwości padding, nie tworzą odstępu między wierszami, można użyć line-height. Jeżeli element spadnie do drugiej linii to obramowania się na siebie nałożą.