Ich versuche, Tabs mit reinem HTML/CSS zu erstellen, und es funktioniert gut in allen gängigen Browsern. Außer IE, sowohl 7 als auch 8.
Wenn ich nichts hinzufüge display: table zum ul Der Inhalt steht nicht in jedem Browser in einer neuen Zeile. Der IE zeigt ihn jedoch nicht in einer neuen Zeile an, auch nicht, nachdem ich ihn hinzugefügt habe. Was kann ich dagegen tun? Gibt es eine bessere Möglichkeit, Tabs in reinem HTML/CSS zu erstellen?
<!DOCTYPE>
<html>
<head>
<style type="text/css">
ul.tabs {
display: table;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.tabs>li {
float: left;
padding: 10px;
background-color: lightgray;
}
ul.tabs>li:hover {
background-color: yellow;
}
ul.tabs>li.selected {
background-color: orange;
}
div.content {
border: 1px solid black;
}
</style>
</head>
<body>
<ul class="tabs">
<li class="selected">One</li>
<li>Two</li>
<li>Three</li>
</ul>
<div class="content">
This should really appear on a new line.
</div>
</body>
</html>
