Question

我正在为Facebook构建一个副本启动页面，但在将Facebook徽标向左移动时遇到问题，这些元素当前位于中心位置，而不是相应地放置。

看看代码-

#navbar{
        width: 60%;
        margin: 0 auto;
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        height: 4.9rem;
    }
    .img{
        height: 4.75rem;
        flex-basis: 30%;
    }
    .form{
        display: flex;
        align-items: center;
        flex-basis: 40%;
        justify-content: space-around;
        font-size: 12px;
        color: #ffffff;
    }
    .label{
        display: block;
    }

<nav id="header">
    <div id="navbar">
        <div id="logo">
            <a href="facebook.com"><img class="img" src="./image/image2.jpg" alt=""></a>
        </div>
        <form action="" method="GET" class="form">
            <div>
                <label for="email" class="label">Email or phone</label>
                <input type="email" id="email" name="email">
            </div>
            <div>
                <label for="password" class="label">Password</label>
                <input type="password" id="password" name="password">
            </div>
            <button type="submit" class="btn">
                <a href="facebook.com" class="anchor">
                    Login
                </a>
            </button>
       </form>
  </div>
</nav>

Answer 1

您可以执行float: left;以使导航栏上的所有内容左对齐。

Answer 2

您遇到了一些结构性问题，但更改了async function fetchAsync () { // await response of fetch call const response = await fetch('https://api.github.com'); // only proceed once promise is resolved const data = await response.json(); // only proceed once second promise is resolved return data; }；在justify-content: center至#navbar上；现在可以解决。

将Facebook图标向左移动

2 个答案: