帶間隔條的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導航欄

回答

相關問題