CSS 전체 탐색 모음 주위에 테두리를 넣는 방법

Question

https://jsfiddle.net/gnpoy2jc/

전체 탐색 요소 주위에 테두리를 만들고 싶습니다. 각 개별 태그가 아닙니다. 난 당신이 모든 <a> 요소 주위에 경계를두고 있기 때문에이

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

Answer 1

당신은 그것을 요 ​​페이지를 조정하는 두 폭 값을 수정할 수 있습니다,이 시도

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

Answer 2

을 작동시킬 수없는 것. CSS에서 'a'를 제거하면 제대로 작동합니다.

.bigBar { 
    border:1px solid; 
} 

글쎄, 나는 그렇게 또한 당신은 당신의 경우 .bigBar에 있도록 컨테이너 요소에 테두리를 추가 할 필요가 border:1px solid;

Answer 3

추가하려면 테두리를 지정하지 않은 참조하십시오. 자녀 요소는 float: left;이므로 clearfix를 적용해야합니다. 따라서 귀하의 CSS를이 추가 :

.bigBar{ 
    border: 10px solid black; 
} 

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