html - HTMLとCSSを使用して全幅バーを設計する方法

Question

このWebのバーのように、ページの幅の100％に収まる全幅のナビゲーションバーを作成したいと思います。Actividad | コミニカシオネス：

https://community.jivesoftware.com/welcome

HTMLとだけを使いたい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; }