时间戳

首页 > 解决方案 > 将 facebook 图标向左移动

html - 将 facebook 图标向左移动

问题描述

我正在为 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>

标签： htmlcss

解决方案

你有一些结构问题，但正在改变justify-content: center；到; #navbar_ justify-content: space-around现在会修复。

推荐阅读