Question

这是HTML代码。我尝试将导航移动到h1旁边，但水平对齐不正确

<header>
    <div class="container"> 
        <div class="header-top">
            <h1><a href=""></a> tik</h1>
                <section>
                    <a class="hvr-sweep-to-bottom" href="">Sign In</a>
                    <a class="hvr-sweep-to-bottom" href="">Register</a>
                </section>
        </div>
            <nav>
                <a class="hvr-bob" href="">Home</a>
                <a class="hvr-bob" href="">Problems</a>
                <a class="hvr-bob" href="">Discussion</a>
                <a class="hvr-bob" href="">About</a>
           </nav>
        </div>
</header>

CSS：

body {
    font-family: Raleway, sans-serif;
}

header{
    background-image: radial-gradient(circle, #cbb695, #b4a78c, #9f9984, 
#8b897c, #7a7a74);
    padding: 1.5em 1em;
}
header h1 {
    margin-top: 0;
    font-size: 2em;
    font-weight: bold;
}
.container{
    max-width: 1200px;
    margin: 0 auto;
}
.header-top{
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    color: white;

}
header a{
    color: white;
    padding-left: 5px ; 
    padding-right: 5px;
}

nav {
    display: flex;
    justify-content: center;
}
nav > a {
    padding-left: 20px;
    padding-right: 20px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 1)
}

a {
    text-decoration: none;

}

这是我要实现的目标的图像。我是CSS和flexbox的新手。

image of navbar

左侧的Tik，位于中间的导航栏和sign_in，在右侧注册。如果您没有收到即时消息，请询问。我会尽力解释一下。

Answer 1

更改了一些HTML和CSS

a=array([100,2])
b=array([1,2])

https://jsfiddle.net/25gm6xne/1/

我正在尝试缩进导航栏登录按钮

1 个答案: