Kleiner Abstand zwischen Navigationselementen

Räuber_Glotzenrotz

Grünschnabel
Hallo,

ich werde noch wahnsinnig, ich habe in einer horizontalen Navi kleine Abstände zwischen den Elementen, sodass der Hover-Effekt nicht ganz an das Elemt davor ansetzt.
Ich bin noch ein frischling was CSS angeht, aber dieses Prob hatte ich noch nie.
Ich stelle mich wahrscheinlich total doof an.
Ich hab das Prob mal aus meinem Layout herausgezogen und nur den Codeteil eingefügt, der davon betroffen ist.

Ich dachte zuerst, vllt. hat sich da ein List-Style-Type eingeschlichen, hab aber schon ein None stehen :(

Naja die einzigste Möglichkeit, die ich momentan hatte, war der #navi ul li ein negatives margin zu geben, aber dass kann jawohl nicht die Lösung des Problems sein?

HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">

#navi{
	height: 41px;
	width: 960px;
	background: #F93;
	-webkit-border-radius: 8px;
	border-radius: 8px; 

}

	#navi ul{
		list-style: none;
		line-height: 41px;
	
	}

	#navi ul li{
		display: inline-block;
		text-decoration: none;
			
	}

		#navi ul li a{
			display: block;
			color: #FFF;
			padding-right: 30px;
			padding-left: 30px;
			border-right: 1px solid #FFF;
			
		}

			#navi ul li a:hover{
				background: #F30;
			}
</style>

<title>Unbenanntes Dokument</title>
</head>

<body>

		<div id="navi">
			<ul>
            	<li><a href="#">Home</a></li>
                <li><a href="#">Bilder</a></li>
                <li><a href="#">Kontakt</a></li>
            </ul>
         </div>

</body>
</html>
 
Aus
CSS:
	#navi ul li{
		display: inline-block;
		text-decoration: none;
			
	}
wird
CSS:
	#navi ul li{
		float: left;			
	}

Und text-decoration:none wird stattdessen dem a-Element zugeschrieben, damit es Wirkung zeigt.
 
Hi,

du willst also, dass der weiße Abstand verschwindet?
Dann entfern doch einfach die Zeile die das bewirkt...
CSS:
border-right: 1px solid #FFF;
 
Zuletzt bearbeitet:
Danke spicelab, das float:left hat funktioniert, allerdings musste das "list-style: none;" doch auf die Listenelemente und nicht auf "a" ausgewiesen werden!
 
allerdings musste das "list-style: none;" doch auf die Listenelemente und nicht auf "a" ausgewiesen werden!
Ich sprach von text-decoration, nicht von list-style ;)

Zur Erinnerung:

CSS:
	#navi ul li{
		...
		text-decoration: none;
			
	}
wird hierher verschoben:

CSS:
		#navi ul li a{
			...
			text-decoration: none;
			
		}
... damit die Links wirkungsvoll keine Textunterstreichung erfahren, wofür diese Regel steht.
 
Zuletzt bearbeitet:
Zurück