框覆盖导航元素

Question

如何制作类似下图的标题？我被困在带有徽标和导航栏的部分上。如何制作div（徽标）来打破导航栏（灰/黑线）？导航栏和幻灯片显示应为全屏宽度（响应），内容区域宽度为1200px。这是小提琴：https://jsfiddle.net/syeL5x2t/20/

<header id="header">
    <div class="inside">
        <div id="logo"><a href="" title=""><img src="http://via.placeholder.com/350x150" alt="" />test</a></div>
        <nav id="nav">
            <ul>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li class="last"><a href="#">4</a></li>
            </ul>
        </nav>
    </div>
</header>

] 1

Answer 1

我会为标题添加3个div： 一个用于灰色区域，一个用于徽标，一个用于黑色区域。

然后你给每个div一个固定的位置和一个特定的宽度。

我希望我能提供帮助:)。

Answer 2

不确定这是不是你想要的，但这里有一个我想出的例子：

https://jsfiddle.net/lenochka/syeL5x2t/39/

我已经使用了display: flex并在其中添加了几个div并删除了很多你的css。