html - 如何使标题更宽？

Question

我为我的网页设计了一个页眉，它使用了三个 li，但是我的菜单需要变得更宽一些才能让它看起来更好。现在我的代码是这样的:

header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10;
    animation-name: dropHeader;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-duration: 0.75s
}

header ul {
    display: inline-block;
    background: #fff;
    text-align: center;
    padding: 10px;
    margin: 0;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px
}

<header>
    <div id="mobile-menu-close">
        <span>Close</span> <i class="fa fa-times" aria-hidden="true"></i>
    </div>
   <!-- Not sure if to menu or not -->

   <ul id="menu" class="shadow">
        <li>
            <a href="#about">About</a>
        </li>
        <li>
            <a href="#projects">Projects</a>
        </li>
        <li>
            <a href="#contact">Contact</a>
        </li>
    </ul> 
</header>

我似乎无法弄清楚如何在不混淆不同分辨率的情况下让它到达网页的“Angular 落”。

Answer 1

您可以使用 flex css 来实现这一点。

header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10;
    animation-name: dropHeader;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-duration: 0.75s
}

header ul {
    display: flex;
    background: #fff;
    text-align: center;
    padding: 10px;
    margin: 0;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    justify-content: space-around;
    list-style: none;
}

<header>
    <div id="mobile-menu-close">
        <span>Close</span> <i class="fa fa-times" aria-hidden="true"></i>
    </div>
   <!-- Not sure if to menu or not -->

   <ul id="menu" class="shadow">
        <li>
            <a href="#about">About</a>
        </li>
        <li>
            <a href="#projects">Projects</a>
        </li>
        <li>
            <a href="#contact">Contact</a>
        </li>
    </ul> 
</header>

您还可以使用 justify-content: space-between; 来适应全屏。希望这对您有所帮助。