html - 如何将导航元素定位在标题元素下？

Question

每当我在移动设备上查看时，我希望我的导航位于我的“Acme Web Design”标题下。我的所有元素都放置在笔记本电脑屏幕的正确位置，但是当我检查它是否响应时，它们并没有放置在我希望它们所在的位置。

这是我的标题在响应式视图中的样子。

这是我使用的 HTML 和 CSS 文件。

.headerdiv {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

/* Header */
header{
    background-color: #35424a;
    border-bottom: 2px solid #ff6600;
    color: white;
    padding-top: 30px;
    min-height: 70px;
}
nav {
    float: right;
    margin-bottom: 30px ;
}

nav a {
    color: white;
    text-decoration: none;
    padding: 10px;
}

<header>
    <div class="container">
        <div class="headerdiv">
            <h1>Acme Web Design</h1>
            <nav>
                <a href="index.html">HOME</a>
                <a href="about.html">ABOUT</a>
                <a href="services.html">SERVICES</a>
            </nav>
        </div>
    </div>
</header>

这就是我希望我的标题看起来的样子

标签： htmlcssflexbox

Answer 1

试试这个..你会在任何设备上得到相同的结果。

如果你想增加菜单的大小，你可以使用 font-size 来做到这一点。

	headerdiv {
display: flex;
justify-content: space-between;
align-items: flex-end;
}

/* Header */
header{

background-color: #35424a;
border-bottom: 2px solid #ff6600;
color: white;
padding-top: 8px;
min-height: 70px;

}

nav {

/* float: right; */
text-align: center;
margin-bottom: 30px ;

}

nav a {

color: white;
text-decoration: none;
padding: 10px;

}

<header>
		<div class="container">
			<div class="headerdiv">	
				<div>
					<h1 style="text-align: center;">Acme Web Design</h1>
				</div>
				<div>
				<nav>
					<a href="index.html">HOME</a>
					<a href="about.html">ABOUT</a>
					<a href="services.html">SERVICES</a>
				</nav>
			</div>
			</div>
		</div>
</header>