Html 为简单响应头编写代码
我正在尝试为我的网站编写响应标题。理想情况下，在大屏幕上，徽标将位于左侧，三个项目的内嵌菜单将位于右侧。当您在小屏幕上查看它时，我希望徽标居中于顶部，三个菜单项堆叠并居中 我有两个问题。首先，我无法将内嵌菜单与徽标对齐。我将logo设置为margin:auto，但当我将文本菜单设置为该选项时，它会将自己推到页面的最顶端。我手动调整了上边距，但注意到它根据设备屏幕大小（duh）而变化，因此它并非始终与徽标垂直对齐。我想它是垂直对齐的标志在所有屏幕大小 第二个问题是，当我在小屏幕上查看它时，文本菜单堆叠在徽标下，但它没有居中，我不知道为什么 堆叠菜单不居中的问题一直在发生，所以我从头开始，仍然遇到这个问题Html 为简单响应头编写代码,html,css,Html,Css,我正在尝试为我的网站编写响应标题。理想情况下，在大屏幕上，徽标将位于左侧，三个项目的内嵌菜单将位于右侧。当您在小屏幕上查看它时，我希望徽标居中于顶部，三个菜单项堆叠并居中 我有两个问题。首先，我无法将内嵌菜单与徽标对齐。我将logo设置为margin:auto，但当我将文本菜单设置为该选项时，它会将自己推到页面的最顶端。我手动调整了上边距，但注意到它根据设备屏幕大小（duh）而变化，因此它并非始终与徽标垂直对齐。我想它是垂直对齐的标志在所有屏幕大小 第二个问题是，当我在小屏幕上查看它时，文本菜单
{
框大小：边框框；
}
.栏目{
浮动：左；
宽度：50%；
}
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.栏目{
宽度：100%；
文本对齐：居中；
保证金：自动；
}
}
保险商实验室{
字体大小：14px；
字体系列：“文人”，衬线；
字母间距：2px；
}
李{
显示：内联；
}
<html>
<head>
<meta content="width=device-width, initial-scale=1" name="viewport" />
<style>
{
box-sizing: border-box;
}
.column {
float: left;
width: 50%;
background-color: transparent;
flex: 1;
}
.column img {
max-width: 100%;
height: auto;
}
.row:after {
content: "";
display: table;
clear: both;
}
// makes side by side div's same height
.row {
display: flex;
}
// makes nav-div's content vertically centered
#nav {
display: flex;
align-items: center;
}
ul {
font-size: 14px;
font-family: 'Literata', serif;
letter-spacing: 2px;
margin: 0;
padding: 0;
}
li {
display: inline;
}
@media screen and (min-width: 601px) {
// for big screens, make links appear side by side
li {
float: left;
}
}
@media screen and (max-width: 600px) {
.column {
width: 100%;
text-align: center;
margin: auto;
float: none;
}
li {
text-align: center; //centers links
display: block; // makes links appear on top of each other, not side by side
}
}
</style>
</head>
<body>
<header>
<div class="row">
<div class="column">
<img src="imglink">
</div>
<div class="column" id="nav">
<ul>
<li><a href="#about">ABOUT</a></li>
<li><a href="#menu">MENU</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
</header>
</body>
</html>
´´´
{
框大小：边框框；
}
.栏目{
浮动：左；
宽度：50%；
背景色：透明；
弹性：1；
}
.img列{
最大宽度：100%；
高度：自动；
}
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
//使并排跳水的高度相同
.行{
显示器：flex；
}
//使导航div的内容垂直居中
#导航{
显示器：flex；
对齐项目：居中；
}
保险商实验室{
字体大小：14px；
字体系列：“文人”，衬线；
字母间距：2px；
保证金：0；
填充：0；
}
李{
显示：内联；
}
@媒体屏幕和屏幕（最小宽度：601px）{
//对于大屏幕，使链接并排显示
李{
浮动：左；
}
}
@媒体屏幕和屏幕（最大宽度：600px）{
.栏目{
宽度：100%；
文本对齐：居中；
保证金：自动；
浮动：无；
}
李{
文本对齐：居中；//居中链接
display:block；//使链接彼此重叠，而不是并排显示
}
}
´´´
li{
列表样式：无；
}
.标题{
显示器：flex；
柔性包装：nowrap；
对齐项目：居中；
背景色：#ccc；
填充：8px；
}
图像{
宽度：120px；
}
.菜单ul{
显示器：flex；
填充：0；
证明内容：中心；
}
李先生{
填充：0 8px
}
.菜单{
最大宽度：100%；
弹性：0.100%；
文本对齐：居中；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.标题{
柔性包装：包装；
}
.标志{
弹性：0.100%；
最大宽度：100%；
文本对齐：居中；
}
}