Question

我希望在左侧和右侧有一个带有菜单的居中徽标。

这就是今天的样子：

......这就是我想要实现的目标：

一些意见：

徽标应始终位于中心。左边的菜单应该从徽标向左推，右边的菜单应该在右边推。
这是一个WordPress主题，所以我不知道将多少（或多长）菜单项添加到徽标的每一面。
从技术上讲，菜单将是两个无序列表（如HTML中所示），因此无需拆分菜单。

HTML：

<div class="wrapper">

    <header>

        <nav class="nav-left">
            <ul>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
            </ul>
        </nav>

        <h1 class="logo"><a href="#">Logo</a></h1>

        <nav class="nav-right">
            <ul>
                <li><a href="#">Item 4</a></li>
                <li><a href="#">This long item is giving me a headache</a></li>
            </ul>
        </nav>

    </header>

  <main>
        <span class="arrow">&uarr;</span>
        <p>This is the center where the logo should be aligned.</p>
  </main>

</div>

SCSS：

header {
    padding: 2em;
    background-color: #efefef;
    display: flex;
    align-items: center;
    justify-content: center;
}

li {
    display: inline;

    a {
        padding: 1em;
    }
}

h1 {
    font-size: 2em;
    font-weight: bold;
    padding-left: 1em;
    padding-right: 1em;
}

// Unimportant stuff...
.wrapper {
    font-family: sans-serif;
}
a {
    text-decoration: none;
    color: inherit;
}
main {
    padding: 2em;
    text-align: center;

    .arrow {
        font-size: 2em;
    }
}

https://codepen.io/transbetacism/pen/qYqmQG

使用居中徽标

0 个答案: