边界只有一半的div

I have a div inside my nav bar, where I have my logo. This div excels the nav bar and shows off into the wrapper. I'll add an image to show you exactly what I mean:

我有一个div在我的导航栏里，我有我的标志。这个div优于导航条，并显示在包装。我将添加一个图片，向你展示我的意思:

So, that image on the left is my logo.
The nav, as you can see, has a border-bottom property, to show a tiny red line, so what I want is to also show that border in the logo div, but only in the part that separates the nav with the wrapper (normal blue with dark blue).
This is my code:

左边的图像是我的标志。正如你所看到的，nav有一个边底属性，用来显示一条小的红线，所以我想在logo div中也显示这个边框，但只显示与包装分开的部分(正常的蓝色和深蓝色)。这是我的代码:

HTML

HTML

    <nav>
    <a href="index.php"><img src="resources/img/logo.png" id="logo"></a>
    <ul>
        <li><a href="portfolio.php">Portfolio</a></li>
    </ul>
</nav>

CSS

CSS

    nav {
    width: 100%;
    text-align: center;
    padding: 0;
    margin: 0;
    background-color: #38434d;
    height: 99%;
    border-bottom: 1px solid darkred;
    clear: both;
}

#logo {
    max-width: 7%;
    background: #38434d;
    float: left;
    padding: .2em;
    margin: .1em 0 0 3em;
}

So, what can I do to show only the bottom border of my logo div?
Thanks!

那么，如何才能只显示我的logo div的底部边框呢?谢谢!

1 个解决方案

#1

One approach, is to style the <a> element, rather than the contained <img>, and use a pseudo-element whose borders we can style:

一种方法是使用元素而不是所包含的，并使用一个我们可以对其边框进行样式化的伪元素:

nav {
  width: 100%;
  text-align: center;
  padding: 0;
  margin: 0;
  background-color: #38434d;
  height: 99%;
  border-bottom: 1px solid darkred;
  clear: both;
}
/* keeping the same styling, with the addition of the position
   in order to position the pseudo-element */
nav > a {
  max-width: 7%;
  background: #38434d;
  float: left;
  padding: .2em;
  margin: .1em 0 0 3em;
  position: relative;
}
nav > a img {
  width: 30px;
  height: 60px;
}
nav > a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  /* styling the border of the pseudo-element the same as the nav element: */
  border: 1px solid darkred;
  /* 'removing' the top-border */
  border-top-width: 0;

<nav>
  <a href="index.php">
    <img src="resources/img/logo.png" id="logo">
  </a>
  <ul>
    <li><a href="portfolio.php">Portfolio</a>
    </li>
  </ul>
</nav>