CSS如何在整個導航欄上放置邊框

-1

https://jsfiddle.net/gnpoy2jc/CSS如何在整個導航欄上放置邊框

我想圍繞整個導航元素製作邊框。並非每個人都有一個標籤。我似乎無法得到它的工作

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

CSS

.bigBar a { 
    padding: 10px 15px; 
    text-align: center; 
    color: white; 
    text-decoration: none; 
    float: left; 
    width: 15%; 
    background: #933737; }

來源

2017-03-09 robby

試試這個，你可以修改這兩個寬度值來調整它喲你的頁面

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

來源

2017-03-09 23:46:23 KillerPollo

因爲你是把邊界周圍的每一個<a>元素。刪除CSS中的'a'，它應該可以工作。

.bigBar { 
    border:1px solid; 
}

好了，我看你沒有指定邊框所以也增加border:1px solid;

來源

2017-03-09 23:11:57 Rob

你需要一個邊界你的情況.bigBar添加到容器元素等等。由於你的子元素是float: left;你需要應用一個clearfix。因此，這種添加到您的CSS：

.bigBar{ 
    border: 10px solid black; 
} 

.bigBar:after{ 
    content: ""; 
    display: table; 
    clear: both; 
}

來源

2017-03-09 23:13:13

CSS如何在整個導航欄上放置邊框

回答

相關問題