html - 使边框宽度比元素宽(不使用填充)

Question

我想要实现的目标的屏幕截图: (我涵盖了 Logo 和链接)

我有一个包含两个元素的标题: Logo 部分和导航栏。

现在我尝试为导航元素创建一个边框顶部，即任何给定尺寸的屏幕宽度为 100%。

我无法使用 padding-left-right，并且我想避免使用额外的标记。

这可以实现吗？可能使用 :before?

<header>
    <div class="site-header">
        some stuff + a full width border in the middle!
    </div>
    <nav>
        <ul>
            <li>linka</li>
            <li>link b</li>
        </ul>
    </nav>
</header>


.site-header, nav {
    max-width: 500px;
    margin: 0 auto;
}

nav {
    border-top: 1px solid red; 
}

fiddle : https://jsfiddle.net/oodrabm2/1/

Answer 1

您的导航应该位于标题之外，或者您需要仅在站点标题上设置宽度，而 ul 而不是导航，例如:

.site-header, nav ul {
    max-width: 500px;
    margin: 0 auto;
}

nav {
    border-top: 1px solid red; 
}

<header>
    <div class="site-header">
        some stuff + a full width border in the middle!
    </div>
    <nav>
        <ul>
            <li>linka</li>
            <li>link b</li>
        </ul>
    </nav>
</header>