开发者

Why is the <ul> clearing the sidebar to the left?

开发者 https://www.devze.com 2023-03-31 17:16 出处：网络

Here\'s the code: <html> <head> <link href=\"http://twitter.github.com/bootstrap/assets/css/bootstrap-1.1.1.css\" rel=\"stylesheet\" />

相关专题：css twitter-bootstrap

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/