边界仅占div的一半

Question

我的导航栏里面有一个div，我有我的标识。 这个div优于导航栏并显示在包装器中。 我将添加一个图像来向您显示我的意思：

所以，左边的图像是我的标识。
你可以看到，导航有一个border-bottom属性，显示一条很小的红线，所以我想要的是在徽标div中也显示边框，但仅限于将导航器与包装器分开的部分（正常蓝色，深蓝色）。
这是我的代码：

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

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

那么，我该怎么做只显示我的logo div的底部边框？
谢谢！

Answer 1

一种方法是设置<a>元素的样式，而不是包含的<img> ，并使用我们可以设置样式的伪元素：

 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>