创建一个不与任何其他边界相连的边界

Question

我正在尝试创建一个与此处图片所示类似的导航栏：

想法是它是一个导航栏，其中的边框不接触任何其他边框，这可以通过 hr 标签来完成，但我无法解决如何使其垂直并适合导航栏

.topnav {
  background-color: lightgray;
  overflow: hidden;
  border-top: 1px solid grey;
  border-left: none;
  border-bottom: none;
}


/* Style the links inside the navigation bar */

.topnav a {
  color: #575859;
  text-align: center;
  display: inline-block;
  width: 16.15%;
  height: 80px;
  text-decoration: none;
  font-size: 17px;
  border-right: 1px solid grey;
}


/* Change the color of links on hover */

.topnav a:hover {
  background-color: #F0191C;
  color: white;
}


/* Add a color to the active/current link */

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

<div class="topnav" id="myTopnav">
  <a href="C:\Users\Cdogb\Documents\coursework\year 1\web design\coursework 2\website\index.html">Home</a>
  <a href="C:\Users\Cdogb\Documents\coursework\year 1\web design\coursework 2\website\product.html">Products</a>
  <a href="#index">Protect</a>
  <a href="#index">Stocklist's</a>
  <a href="#index">Events</a>
  <a href="#reviews">Reviews</a>
</div>

Answer 1

在您的 CSS 中为 topnav 创建一个 height 比 a child 大 .然后给它填充以使 a child 垂直居中.. 还要将 line-height 添加到 child 以使文本垂直居中。这很粗糙..但应该为您指明正确的方向。 .. IE

.topnav {
    background-color: lightgray;
    overflow: hidden;
    border-top: 1px solid grey;
    border-left: none;
    border-bottom: none;
    height:45px;                                      /* ADDED  */
    padding: 10px 0 10px 0;                           /* ADDED  */
}

/* Style the links inside the navigation bar */
.topnav a {
    
    color: #575859;
    text-align: center;
    display:inline-block;
    width: 16.15%;
    height: 40px;                                     /* CHANGED */
    text-decoration: none;
    font-size: 17px;
    border-right: 1px solid grey;
    line-height:40px;                                 /* ADDED */
}


/* Change the color of links on hover */
.topnav a:hover {
    background-color: #F0191C;
    color: white;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

  <div class="topnav" id="myTopnav">  
     <a href = "C:\Users\Cdogb\Documents\coursework\year 1\web design\coursework 2\website\index.html">Home</a>         
     <a href = "C:\Users\Cdogb\Documents\coursework\year 1\web design\coursework 2\website\product.html">Products</a>   
     <a href = "#index">Protect</a> 
     <a href = "#index">Stocklist's</a>      
    </div>

创建一个不与任何其他边界相连的边界

creating a border that is not connected to any other border

html

css

border