En vågrät meny

Jag vill ha en vågrät meny med knappar. För att slippa javascript gör jag om mina <a>-taggar till knappar. Då vill jag kunna sätta höjd och bredd, men eftersom <a> är span måste jag ändra till block.

Ändrar jag till block hamnar alla <a>-taggar under varandra. För att ändra på detta sätter jag float: left; och då blir det vågrätt, men problemet är att flytande objekt tas bort ur dokumentflödet. Min trevliga container till menyn blir då helt tom och osynlig.

Hur kan jag fylla ut min container utan att behöva lägga till något extra element?

Tacksam för svar.

Antar att du använder en <ul> -lista för menyn.
Du behöver inte använda float. Lägg istället in display:inline på <li>-elementet.

        * {margin:0;padding:0;}
	
	
	ul {
		width:400px;
		border:1px solid #000
		
	}

	li {
		list-type:none;	
		display:inline;

	}
	
	a {
		
		background:#333;
		border:1px solid #00f;
	}
	a:hover {
		background:#eee;
	}

Jag använde ingen lista alls faktiskt och med ditt exempel blir det både bättre kod samt mer semantiskt. Perfekt helt enkelt.

Tack!