html - 如何使用 HTML 和 CSS 设计全宽栏

Question

我想创建一个适合页面宽度100%的全宽导航栏，就像这个网站的栏一样，它包含 *Inicio | 活动 | 通讯：

https://community.jivesoftware.com/welcome

我只想使用HTMLand CSS。另一方面，栏不必在顶部。

我想做一些与图片非常相似的事情，但我不知道如何实现

请分享一个简单的例子！提前致谢！

Answer 1

将您的栏包含在一个带有一些 id 的 div 中，例如

<div id="mybar">
    <!-- your HTML -->
</div>

在 CSS 上，使用以下属性

#mybar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:50px;
}

Answer 2

看看这是我为你做的...

http://jsfiddle.net/x6PrR/

它展示了如何做到这一点并添加另一个 DIV 以获得一些不错的填充/间距。

祝你好运！

编辑：

HTML

<div id="nav">
    <div id="nav-inner">
        <p>Some navigations stuff...</p>
    </div>
</div>

<!-- we set the first DIV to full width 100%. Because we do this, we can't add padding because that will make it larger than 100%...weird I know. A way around this is to then add another DIV inside to create the padding that has a width of AUTO. -->

CSS

#nav { float: left; clear: both; width: 100%; margin: 0; padding: 0; background: #222; }
#nav-inner { float: left; clear: both; width: auto; margin: 0; padding: 10px 20px; background: transparent; }
p { color: #fff; font-family: arial; font-weight: bold; }