css - 为什么 <ul> 清除左侧的侧边栏?

标签 css twitter-bootstrap

代码如下:

<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></li>
            <li><a href="#">Settings</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>

以及实时预览的链接:http://jsfiddle.net/7W32Z/ .

为什么边框最终在侧边栏下方?它与应用于 <ul class="tabs" /> 的 clearfix 有关元素,因为如果我 clear: right只是,边界跳起来了。

最佳答案

float ul.tabs 并且边框应该是固定的。

http://jsfiddle.net/laheab/7W32Z/3/

关于css - 为什么 <ul> 清除左侧的侧边栏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7213135/

相关文章:

javascript - 无法通过 javascript 链接回 MVC View

mysql - 将多列 MySql 记录转换为响应式显示

css - Bootstrap 4 使导航栏品牌图像在大屏幕上重叠并在小屏幕上缩小以适合

javascript - Angular4 添加第二个 tbody 元素

html - 使多个嵌入的div的高度与其父div的高度相同

css - 小部件仪表板的脚手架

php - 每行包含 3 列的循环数据

html - 显示两级无序列表行

html - CSS 表格格式化为 HTML 表格

css - Bootstrap 删除下拉列表中的向上箭头