Unten ist ein Menü in einer Kopfzeile. Die Elemente ul und li schweben und schweben jetzt unter der Kopfzeile, was ich mit clear verhindern wollte: beides. Das scheint jedoch nicht zu funktionieren, also frage ich mich ... was kann falsch sein?clear: beide werden nicht funktionieren
html:
<header>
<ul>
<li><a href='#'>Item 1</a></li>
<li><a href='#'>Item 2</a></li>
<li><a href='#'>Item 3</a></li>
<li><a href='#'>Item 4</a></li>
</ul>
<div class='clear'/>
</header>
css:
header {
background: #888;
height: 20px;
padding: 10px;
}
ul{
margin: 18px 0;
padding: 0;
list-style: none;
}
ul li{
margin: 0 10px 0 0;
padding: 0;
display: block;
float: left;
width: 80px;
height: 20px;
border: 1px solid #000;
background: red;
}
ul li a{
display:block;
width: 100%;
height: 100%;
text-decoration: none;
float: left;
text-align: center;
padding-top: 2px;
}
ul li a:hover{
color: #fff;
background-color: #000;
}
.clear {
clear:both;
}
Was möchten Sie hier erreichen? Das div ist leer, also warum sollte es im Header sein? –
Das Problem ist, dass die 'li's auch floated sind. – Gareth
Keine Antwort, aber ich fühle mich immer besser, wenn ich den 'overflow: hidden' Hack auf dem Container benutze. – PeeHaa