个人中心
gpt4 book ai didi

html - 标签内的 div 换行

转载 作者：行者123 更新时间：2023-12-05 09:30:29 25 4
gpt4 key购买 nike

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

如何将我的三个菜单行与其他菜单行并排对齐？ display: inline-block; 对我不起作用？

我要创建的是类似于此图像的内容:

![enter image description here

但是我错过了什么让菜单在同一行？

.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>

最佳答案

把这个放在你的 .right-nav

Display flex 在这种情况下非常有用。
flex-direction属性不是必需的，display flex本身默认为flex-direction: row;。
gap 也不是必需的，它只是在您的元素之间形成一个间隙。
align-items 是让你的元素在中心垂直对齐。

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

关于html - 标签内的 div 换行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69539546/

25 4 0
文章推荐： typescript - vue3 vite 别名无法按预期使用 typescript
文章推荐： python - 如何对齐 __str__ 输出中的列表？
文章推荐： python - 查找 NetworkX 中所有节点对之间的所有最短路径
文章推荐： tensorflow - 获取错误 "Resource exhausted: OOM when allocating tensor with shape[1800,1024,28,28] and type float on/job:localhost/..."