html - 标签内的 div 转到新行

问题描述

我试图并排对齐我的 a-tag，但由于某种原因，a-tag 内的 div 转到下一行？

如何将我的三个菜单行与其他菜单行并排对齐？display: inline-block;没有为我工作？

我想要创建的是这样的图像：

但是我错过了什么才能在同一行获得菜单？

.logo-style {
    font-family: Montserrat;
    font-style: normal;
    font-weight: bold;
    font-size: 32px;
    line-height: 39px;
    /* identical to box height */
    letter-spacing: 0.05em;
    color: #4C5BA0;
}

/*
    Navigation bar three lines menu

/*
 Navigation
*/

.topnav {
    overflow: hidden;
    background: none !important;
    align-items: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.topnav button {
    border: none;
    cursor: pointer;
}

.topnav a {
    color: brown;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
    color: black;
}

.topnav a.active {
    color: black;
}


*/

.line-one {
    width: 30px;
}

.line-one {
    width: 30px;
}

.line-one {
    width: 30px;
}

.menu div {
    width: 30px;
    height: 4px;
    background-color: brown;
    margin: 5px 0;
    border-radius: 25px;
}

.menu {
    width: 30px;
}

.menu:hover div {
    width: 30px;
    background-color: black;
}

.right-nav {}

.left-nav {}

<?php
    declare(strict_types=1);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:600" rel="stylesheet">
    <link rel="stylesheet" href="./css/site.scss">
    <script type="text/javascript" src="./js/toggletheme.js" defer></script>
</head>
<body>
    <header>
        <div class="topnav">
            <div class="left-nav">
                <a href="#news"><p class="logo-style">Web title</p></a>
            </div>
            <div class="right-nav">
                <a href="#home" class="active">Home</a>
                <a href="#archives">Archives</a>
                <a href="#coverage">Coverage</a>
                <a href="#menu" class="menu">
                    <div class="line-one"></div>
                    <div class="line-two"></div>
                    <div class="line-three"></div>
                </a>
            </div>
        </div>
    </header>
</body>
</html>

标签： htmlcss

把这个放在你的.right-nav

显示flex对于这种情况非常有用。
属性flex-direction不是必需的，flex-direction: row;默认情况下显示 flex 本身。
这gap也不是必需的，它只会在您的物品之间产生间隙。
align-items是在中心垂直对齐您的项目。

.right-nav {
   display: flex;
   flex-direction: row;
   gap: 10px;
   align-items: center;
}

html - 标签内的 div 转到新行

问题描述

解决方案

推荐阅读