CSS如何在整个导航栏周围放置边框

Question

https://jsfiddle.net/gnpoy2jc/

我想在整个nav元素周围做一个边框。不是每个人都有一个标签。我似乎无法让它发挥作用

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中添加。由于您的子元素为float: left;，您需要应用clearfix。因此将此添加到您的css：

.bigBar{
  border: 10px solid black;
}

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

Answer 2

因为您将边框放在每个<a>元素周围。删除＆＃39; a＆＃39;在你的CSS中，它应该工作。

.bigBar {
    border:1px solid;
}

好吧，我发现你没有指定边框，所以也添加border:1px solid;

Answer 3

试试这个，你可以修改两个宽度值来调整你的页面

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