Google/StackExchange导航栏

Question

我正在寻找一个像谷歌(他们的新产品)或StackExchange那样的导航栏，它直接出现在顶部。它不需要持久化，我所需要的就是链接，但是我如何才能让它像那样立即保持在首位呢？更重要的是，我如何才能让它总是填满整个屏幕的宽度(而不是有一个定义的宽度)？

目前我有一个简单的内联列表，但是宽度是定义的。

为了做到这一点，我愿意使用新的HTML5技术以及CSS。

Answer 1

你需要做这样的事情

<div id="topBar">
    This is content
</div>

css

body{margin:0; padding:0;}
#topBar{width:100%; text-align:center; background:#ccc; height:25px;}

http://jsfiddle.net/jasongennaro/Xpxhy/

所以，你

1. 将div放在开始body标记之后。
2. 确保正文上没有margins或padding。

<代码>H112将width设置为100%H214

1. 将文本居中对齐。

Answer 2

在工具栏样式中使用position:fixed将其保持在相对于浏览器窗口(而不是浏览器窗口的元素)的固定位置。

#toolbar {
    position:fixed;
    margin: auto;
}

Answer 3

做一些类似的事情：

<nav>
  <ul>
    <li>Link
  </ul>
</nav>

并在nav上定义width:100%，在ul上定义您想要的宽度。在ul上设置margin:0 auto;。为了让它保持在最高位置，给nav position:absolute;和top:0属性。