徽标CSS&；旁边的响应式下拉菜单导航位置；HTML

我有一个问题，它一直在扼杀我，一直在遵循各种教程，以创建我的网站导航栏，但似乎不能得到它的权利。我的问题是，当屏幕较大时，我无法将导航定位在徽标旁边。每次我缩小它，然后单击我的菜单按钮，它就会出现在与上一个屏幕相同的位置，因此我无法看到它

任何来自经验用户的帮助都将不胜感激，下面是我的CSS和HTML

/*去除ul的填充物并列出样式*/
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
位置：固定；
}
/*创建具有间距的水平列表*/
李{
显示：内联块；
浮动：左；
右边距：1px；
}
/*菜单链接的样式*/
李阿{
显示：块；
最小宽度：140px；
高度：50px；
文本对齐：居中；
线高：50px；
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
颜色：#fff；
背景:#2f3036；
文字装饰：无；
}
/*顶级链接的悬停状态*/
李：停一停{
背景：19c589；
}
/*下拉链接的样式*/
李：悬停一下{
背景:#f3；
颜色：#2f3036；
高度：40px；
线高：40px；
}
/*下拉链接的悬停状态*/
li:悬停ul a:悬停{
背景：19c589；
颜色：#fff；
}
/*隐藏下拉链接，直到需要它们*/
李乌尔{
显示：无；
}
/*使下拉链接垂直*/
李宇莉{
显示：块；
浮动：无；
}
/*防止文本换行*/
李宇莉{
宽度：自动；
最小宽度：100px；
填充：0 20px；
}
/*悬停时显示下拉列表*/
ul li a:悬停+.隐藏，.隐藏：悬停{
显示：块；
}
/*默认情况下，设置“显示菜单”标签按钮的样式并将其隐藏*/
.显示菜单{
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
文字装饰：无；
颜色：#fff；
背景：19c589；
文本对齐：居中；
填充：10px0；
显示：无；
}
/*隐藏复选框*/
输入[类型=复选框]{
显示：无；
}
/*选中“不可见”复选框时显示菜单*/
输入[类型=复选框]：选中~#菜单{
显示：块；
}
/*反应型风格*/
@媒体屏幕和屏幕（最大宽度：760像素）{
/*使下拉链接内联显示*/
保险商实验室{
位置：静态；
显示：无；
}
/*创建垂直间距*/
李{
边缘底部：1px；
}
/*使所有菜单链接全宽*/
ul li，li a{
宽度：100%；
}
/*显示“显示菜单”链接*/
.显示菜单{
显示：块；
}
}    
#导航包装器{
}  
#标志img{
最大宽度：100%；
高度：自动；
}
#导航{
背景色：#222；
宽度：100%；
顶部：0px；
左：0px
}

显示菜单

首先，您必须删除徽标的最大宽度和自动高度，还需要将图像容器“DIV”向左浮动，以将导航菜单向右浮动，因此您需要按照以下操作

CSS:

---

其余的都是一样的：）

首先，您需要删除徽标的最大宽度和自动高度，还需要将图像容器“DIV”向左浮动，以将导航菜单向右浮动，因此您需要按照如下操作

CSS:

---

其余部分将是相同的：）

遵循以下步骤：

#logo {
    float: left;
}

#nav_wrapper {
    float: right;
}

@media screen and (max-width : 760px){
#logo, #nav_wrapper {
float: none;
}
}

移除

位置：固定来自您的
ul

在

logo

上使用

float:left

在

nav

上使用

float:right

代码：

#logo {
    float: left;
}

#nav_wrapper {
    float: right;
}

@media screen and (max-width : 760px){
#logo, #nav_wrapper {
float: none;
}
}

对于较小的分辨率：

#logo {
    float: left;
}

#nav_wrapper {
    float: right;
}

@media screen and (max-width : 760px){
#logo, #nav_wrapper {
float: none;
}
}

#徽标{
浮动：左；
}
#导航包装器{
浮动：对；
}
/*去除ul的填充并列出样式*/
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
}
/*创建具有间距的水平列表*/
李{
显示：内联块；
浮动：左；
右边距：1px；
}
/*菜单链接的样式*/
李阿{
显示：块；
最小宽度：140px；
高度：50px；
文本对齐：居中；
线高：50px；
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
颜色：#fff；
背景:#2f3036；
文字装饰：无；
}
/*顶级链接的悬停状态*/
李：停一停{
背景：19c589；
}
/*下拉链接的样式*/
李：悬停一下{
背景:#f3；
颜色：#2f3036；
高度：40px；
线高：40px；
}
/*下拉链接的悬停状态*/
li:悬停ul a:悬停{
背景：19c589；
颜色：#fff；
}
/*隐藏下拉链接，直到需要它们*/
李乌尔{
显示：无；
}
/*使下拉链接垂直*/
李宇莉{
显示：块；
浮动：无；
}
/*防止文本换行*/
李宇莉{
宽度：自动；
最小宽度：100px；
填充：0 20px；
}
/*悬停时显示下拉列表*/
ul li a:悬停+.隐藏，.隐藏：悬停{
显示：块；
}
/*默认情况下，设置“显示菜单”标签按钮的样式并将其隐藏*/
.显示菜单{
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
文字装饰：无；
颜色：#fff；
背景：19c589；
文本对齐：居中；
填充：10px0；
显示：无；
}
/*隐藏复选框*/
输入[类型=复选框]{
显示：无；
}
/*选中“不可见”复选框时显示菜单*/
输入[类型=复选框]：选中~#菜单{
显示：块；
}
/*反应型风格*/
@媒体屏幕和屏幕（最大宽度：760像素）{
#标志，#导航#包装{
浮动：无；
}
/*使下拉链接内联显示*/
保险商实验室{
位置：静态；
显示：无；
}