如何向导航栏添加空白区域?

时间:2013-04-03 07:54:13

标签: html css navigation

http://i.stack.imgur.com/mDS5o.png

我基本上想在导航栏的两侧添加空白区域,以便一直跟随到屏幕的末尾。如果能够这样做,它适合任何屏幕尺寸都会很棒!我已经编写了两天的代码,现在从codeacademy学习,所以我没有完全了解如何做这样的小事。

非常感谢您的帮助。

(导航栏两侧的空白区域应与导航栏道具匹配,即不透明度,大小)

此外,如果有人可以向我解释它是如何完成的,我会更加注意,因为我已经注意到这里提出的很多问题都是用所需的确切代码来回答的,并且只需要复制+粘贴即可。

这就是我正在使用的

http://cssmenumaker.com/builder/459273

2 个答案:

答案 0 :(得分:0)

我希望这个例子可以帮助你

<div class="container">
     <div class="nav">
        <label>foo1</label><label>foo2</label><label>foo3</label>
     </div>
<div>

CSS

.container{width:300px;height:50px; background-color:blue}
.nav{width:120px; height:50px; background-color:green; margin:0 auto;}
.nav label{line-height:50px;}

http://jsfiddle.net/r3D4b/

答案 1 :(得分:0)

为了阐明pconline的代码正在做什么,如果你创建一个100%的div,然后为导航分开div,你可以将外部div扩展到100%的全宽,然后设置风格并分别对齐导航。