如何使用HTML和CSS設計全寬欄

Question

我想創建一個適合於頁面寬度的全寬度導航欄，例如此網頁的欄，其中包含* Inicio | Actividad | COMUNICACIONES：

https://community.jivesoftware.com/welcome

我想只有HTML和CSS使用。另一方面，酒吧並不是最高的。

我想這樣做非常相似的圖片的東西，但我不知道如何實現這一

請分享一個簡單的例子！提前致謝！

Answer 1

一個div中附上您酒吧與一些ID喜歡

<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; }