带间隔条的CSS导航栏

我在哪里可以学习如何制作导航条？主要是，我无法弄清楚如何在资源和调用之间创建该间隔。我会发布我迄今为止的内容。带间隔条的CSS导航栏

CSS

.bigBar { 
    display: inline-block; 
    border: 2px solid black; 
    width: 833px; 
    a { 
     padding: 10px 15px; 
     text-align: center; 
     color: white; 
     text-decoration: none; 
     float: left; 
     width: 15%; 
     background: #933737; 
     border-right: 1px solid #ccc; 
    } 
}

HTML

<nav class="bigBar"> 
      <a class="about" href="#">ABOUT</a> 
      <a class="ministries" href="#">MINISTRIES</a> 
      <a class="evangelsts" href="#">EVANGELSTS</a> 
      <a class="resources" href="#">RESOURCES</a> 
    </nav><!--end class bigBar-->

来源

2017-03-13 robby

如果您有一个固定宽度的导航栏，那么您可以使用'float'将一些项目向左推动一些，并向右推动一些项目。 – pol

正确的，这是有道理的，我要做一个固定宽度的酒吧，但我怎么得到不同的设计左，右浮动项目之间的间距？ – robby

您可以通过一些菜单项做左浮动和他们的休息权浮动。为了改变颜色，你可以在bigBar元素上设置不同于菜单项的背景颜色的背景颜色。

.bigBar { 
    background-color:#6E1B1B; 
    display: inline-block; 
    border: 2px solid black; 
    width: 833px; 
} 

a { 
    padding: 10px 15px; 
    text-align: center; 
    color: white; 
    text-decoration: none; 
    width: 15%; 
    background: #933737; 
    display:inline-block; 
} 

.left { 
    float:left; 
    border-right: 1px solid #ccc; 
} 

.right { 
    float:right; 
    border-left: 1px solid #ccc; 
}

这里是一个小提琴，这样你可以看到它更好https://jsfiddle.net/25n1dqfp/1/

它的建议虽然使ID的独特和类重复的所以它可能是一个好主意，改变菜单项的类ID，而不是

<nav class="bigBar"> 
     <a id="about" href="#">ABOUT</a> 
     <a id="ministries" href="#">MINISTRIES</a> 
     <a id="evangelsts" href="#">EVANGELSTS</a> 
     <a id="resources" href="#">RESOURCES</a> 
</nav><!--end class bigBar-->

来源

2017-03-13 20:03:40 Trent

设置从菜单项nav不同的，然后的背景，你会拥有它：

CodePen

HTML

<nav class="bigBar"> 
    <ul class="main"> 
    <li> <a class="about" href="#">ABOUT</a></li> 
    <li> <a class="ministries" href="#">MINISTRIES</a></li> 
    <li> <a class="evangelsts" href="#">EVANGELSTS</a></li> 
    <li> <a class="resources" href="#">RESOURCES</a></li> 
    </ul> 

    <ul class="right"> 
    <li> <a class="about" href="#">Called?</a></li> 
    <li> <a class="ministries" href="#">Contact</a></li> 
    <li> <a class="evangelsts" href="#">Give</a></li> 
    </ul> 
</nav>

CSS

nav { 
    background: purple; 
    overflow: hidden; 
} 

ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

li { 
    float: left; 
    display: block; 
    background: yellow; 
    border-right: 3px double #000; 
    height: 100%; 
    padding: .5em 1.5em; 
} 

.main { 
    float: left; 
} 

.right { 
    float: right 
}

来源

2017-03-13 19:48:46

带间隔条的CSS导航栏

回答

相关问题