0

使用 twitter-bootstrap-2.0.4

...some topbar code here....
div.container-fluid
  div.content
    div.row-fluid
      div.span2
        div.menuLeft
          a(class='menuLeftItem', href="http://localhost:3000") Explore
          br/
          a(class='menuLeftItem', href="http://localhost:3000") My Playlists
          br/
          a(class='menuLeftItem', href="http://localhost:3000") Challenge
          br/
          a(class='menuLeftItem', href="http://localhost:3000") Socialize
          br/

我的 CSS：

* { margin: 0; padding:0; }

html, body {
background-color: red;
height: 100%;
width: 100%;
overflow: hidden;
}
body {
  padding-top: 58px; /* 40px to make the container go all the way to the bottom of the topbar */
  padding-left: 0px;
  padding-right: 0px;
}
.container-fluid {
  background-color: black;
}
.content {
  background-color: blue;
}
.span2 {
  background-color: green;
}

.menuLeftItem {
  color:white;
  /*font*/
  font-size:13px;
  font-weight:bold;
  line-height:1;
  border: 1px solid white;
}

我的 menuLeftItems 没有正确对齐。具体来说，这些元素的边界是重叠的。请告诉我如何正确对齐元素。此外，我希望每个 menuLeftItem 都采用与其包含元素 span2 相同的宽度。我为 .menuLeftItem 尝试了宽度 = 100%。但它没有生效。

我的目标是为不同的屏幕尺寸创建一个固定的页面布局。因此，我正在尝试使用流体布局。

任何帮助表示赞赏

4

1 回答 1

0

好的 修复它。我需要将 display: inline-block 添加到类 menuLeftItem 中。我发现这是在另一个堆栈线程 HTML/CSS 上的参考 - 将元素宽度扩展到可见区域（超出包含元素的宽度）

于 2012-06-08T21:58:32.343 回答