如何将 CSS 中的 HTML 类与 Flex 布局对齐

Question

我正在努力在弹性布局中垂直对齐两个不同容器之间的边框。

我有一个名为“navbar”的类和一个名为“header-content”的类。这两个类都是嵌套在“header”类中的子类。

“header-content”的大小适当，并使用对齐内容：周围的空间根据需要填充屏幕。

我想对齐“navbar”类的远边缘，以便空白空间与父级中的文本垂直对齐。

我尝试向“navbar”类添加 300px 的边距，以便在网页完全展开时提供结果。但是，如果屏幕尺寸减小，则参数将不成立，并且两个类之间的垂直对齐都会丢失。

请查看以下代码：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Landing Page</title>
    <link rel="stylesheet" href="./css/styles.css">
</head>
<body>
    <div class="header">
        <div class="navbar">
            <div class="header-logo">Header Logo</div>
            <ul>
                <li>header link one</li>
                <li>header link two</li>
                <li>header link three</li>
            </ul>     
        </div>
        <div class="header-content">
            <div class="hero">
                <h1>This website is awesome</h1>
                <p>This website has some subtext that goes here under the main title.  It's a smaller font and the color is lower contrast</p>
                <button>Sign Up</button>
            </div>
            <div class="img">
                <p>This is a placeholder for an image</p>
            </div>
        </div>
    </div>
</body>
</html>

CSS：

.header {
    display: flex;
    flex-direction: column;
    background-color: #1F2937;
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
}


.header-logo, h1 {
    color: #F9FAF8
}

.header-logo {
    font-size: 24px;
}

ul, p {
    color: #E5E7EB;
    font-size: 18px;
}

ul {
    list-style-type: none;
    display: flex;
    gap: 16px
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-around;
    
}

.hero {
    width: 420px;
}

h1 {
    font-size: 48px;
}

button {
    background: royalblue;
    border: 1px solid royalblue;
    color: white;
    padding: 8px 32px;
    border-radius: 10px;
}

所需的布局如下所示：

[所需的布局如下所示：]()

Answer 1

在标头类中添加一些填充
从导航栏类中删除填充
在 header-content 类中将 justify-content: space-around 替换为 justify-content: space- Between

如何将 CSS 中的 HTML 类与 Flex 布局对齐

问题描述投票：0回答：1

1个回答

最新问题

如何将 CSS 中的 HTML 类与 Flex 布局对齐

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1