Why is the <ul> clearing the sidebar to the left?
Here's the code:
<html>
<head>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-1.1.1.css" rel="stylesheet" />
</head>
<body>
<div class="container-fluid">
<div class="sidebar">
<div style="height: 500px; background: red;"></div>
</div>
<div class="content">
<div style="height: 500px; background: #eee;">
<ul class="tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a><开发者_如何学Go;/li>
<li><a href="#">Settings</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
and a link to the live preview: http://jsfiddle.net/7W32Z/.
Why does the border end up below the sidebar? It has to do with the clearfix applied to the <ul class="tabs" /> element, because if I clear: right only, the border jumps up.
Float ul.tabs and the border should be fixed.
http://jsfiddle.net/laheab/7W32Z/3/
加载中,请稍侯......
精彩评论