Html 我的导航显示在我的徽标下方，需要将其向右显示吗
我一直在尝试编写一个小型网站设计的代码，并且已经在这个问题上纠缠了一段时间。我的导航区域在我的示例徽标下面，我需要它在右边，但是，我无法在那里找到它。我尝试过浮动、绝对定位和使用col，但我要么做得不对，要么就是不起作用 我的HTML代码：Html 我的导航显示在我的徽标下方，需要将其向右显示吗,html,css,nav,Html,Css,Nav,我一直在尝试编写一个小型网站设计的代码，并且已经在这个问题上纠缠了一段时间。我的导航区域在我的示例徽标下面，我需要它在右边，但是，我无法在那里找到它。我尝试过浮动、绝对定位和使用col，但我要么做得不对，要么就是不起作用 我的HTML代码： <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<!-- Logo, Search Bar, Categories, and User Profile -->
<a href="index.html"> <img height="64px" width="313px" id="logopic" src="images/logoeg.png"> </a> <!-- LogoPic linking to HomePage -->
<nav>
<ul>
<li><a href="#"> Home |</a></li>
<li><a href="#"> Browse |</a></li>
<li><a href="#"> Categories |</a></li>
<li><a href="#"> Rising</a></li>
</ul>
</nav>
</header>
</body>
给链接一个id并将其浮动到左侧。然后拿着导航，把它向右浮动！有时，认为你浮动了正确的标签会把你搞混 您可以使用
位置：固定？在你的导航上试试这个。它将导航固定在右边缘，从顶部开始为8像素
position:fixed;
right:0px;
top: -8px;
如果可以在项目中使用flexbox，那么添加这些样式就可以了。另请参见附带的代码笔链接
header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: middle;
padding: 0 20px;
}
a, nav {
align-self: center;
}
要正确浮动徽标容器，需要将浮动应用于父容器。您还需要将父对象包装在div容器中，以便在导航链接之前清除浮动
标题{
背景色：#00829F；
字体系列：系统界面；
颜色：白色；
字体大小：34px；
}
.标识容器{
显示：块；
浮动：对；
}
.清楚：之后{
可见性：隐藏；
显示：块；
字号：0；
内容：“；
明确：两者皆有；
身高：0；
}
#标识{
左侧填充：10px；
垫底：0px；
垫面：5px；
}
html，正文{
边际：0px；
填充：0px；
}
保险商实验室{
列表样式类型：无；
}
李{
显示：内联；
}
a:链接{
颜色：白色；
文字装饰：无；
}
a:参观了{
颜色：白色；
文字装饰：无；
}
a:悬停{
颜色：白色；
文字装饰：无；
}
a:主动的{
颜色：白色；
文字装饰：无；
}
您可以使用flex属性来实现这一点：
让你的头弯曲。它会自动将您的徽标和导航对齐在一条直线上。。要将徽标垂直居中对齐，可以使用“将项目对齐居中”
header{
background-color: #00829F;
font-family: system-ui;
color: white;
display:flex;
font-size: 34px;
align-items:center;
justify-content:space-between;
}
检查我的小提琴以获得更好的想法：
“调整内容”将使您的徽标和导航之间具有间距这就成功了！想要它的权利的标志，所以我改变了右到左，并根据需要调整，非常感谢！很乐意帮忙。考虑接受我的回答，因为你发现它有用。
header{
background-color: #00829F;
font-family: system-ui;
color: white;
display:flex;
font-size: 34px;
align-items:center;
justify-content:space-between;
}