Html css菜单还有其他问题吗

我的问题是：我想将菜单栏放在徽标图像旁边，使它们（徽标和菜单）与页面中心对齐（#包装）。我试过用桌子，但没用。此网页使用css媒体查询

@charset“utf-8”；
#包装纸{
保证金：0自动；
利润上限：-15px；
最大宽度：1020px；
宽度：97%；
背景色：#FFF；
边框：1px实心#000；
边界半径：2px；
盒影：0 10px 0 px rgba（12,3,25,1.8）；
}
#滑块{
溢出：隐藏；
文本对齐：居中；
最小宽度：320px；
高度：自动；
宽度：100%；
}
#滑块式img{
宽度：继承；
}
#标题{
最小高度：150px；
溢出：隐藏；
z指数：5；
背景色：#fff；
宽度：100%；
显示：内联；
}
#收割台img{
宽度：218px；
高度：139px；
}
导航{
宽度：自动；
}
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
}
/*创建具有间距的水平列表*/
李{
显示：内联块；
浮动：左；
右边距：#CF0；
}
/*菜单链接的样式*/
李阿{
显示：块；
最小宽度：150px；
高度：100px；
文本对齐：居中；
线高：100px；
颜色：#fff；
背景#34D675；
文字装饰：无；
}
/*顶级链接的悬停状态*/
李：停一停{
背景:"99D829 ;；
}
/*下拉链接的样式*/
李：悬停一下{
背景:#f3；
颜色：#2f3036；
高度：40px；
线高：40px；
}
/*下拉链接的悬停状态*/
li:悬停ul a:悬停{
背景：19c589；
颜色：#fff；
}
/*隐藏下拉链接，直到需要它们*/
李乌尔{
显示：无；
}
/*使下拉链接垂直*/
李宇莉{
显示：块；
浮动：无；
}
/*防止文本换行*/
李宇莉{
宽度：自动；
最小宽度：100px；
填充：0 20px；
}
/*悬停时显示下拉列表*/
ul li a：悬停+隐藏，
.隐藏：悬停{
显示：块；
}
/*默认情况下，设置“显示菜单”标签按钮的样式并将其隐藏*/
.显示菜单{
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
文字装饰：无；
颜色：#fff；
背景：19c589；
文本对齐：居中；
填充：10px0；
显示：无；
}
/*隐藏复选框*/
输入[类型=复选框]{
显示：无；
}
/*选中“不可见”复选框时显示菜单*/
输入[类型=复选框]：选中~#菜单{
显示：块；
}
/*反应型风格*/
@媒体屏幕和屏幕（最大宽度：760像素）{
/*使下拉链接内联显示*/
保险商实验室{
位置：静态；
显示：无；
}
/*创建垂直间距*/
李{
边缘底部：1px；
}
/*使所有菜单链接全宽*/
李国宝，
李阿{
宽度：100%；
}
/*显示“显示菜单”链接*/
.显示菜单{
显示：块；
}
}

NFF-斯里兰卡
显示菜单


























&复制；版权所有2014-Damitha N.Wanniarachi

试试看

Html代码：-

<nav>
      <h1>
        <a href="#">
          <img src="contectIcon.png" alt="NFF Sri Lanka Logo" width="218" height="139" title="NFF Sri Lanka Logo">
        </a>
        </h1>

        <label for="show-menu" class="show-menu">Show</br>Menu</label>
        <input type="checkbox" id="show-menu" role="button">

        <ul id="menu">
          <li><a href="#">HOME</a>
          </li>
          <li><a href="#">INFO ￬</a>
            <ul class="hidden">
              <li><a href="#">National Rainforests</a>
              </li>
              <li><a href="#">Aninmals & Plants</a>
              </li>
              <li><a href="#">Nature Convservation</a>
              </li>
            </ul>
          </li>
          <li><a href="#">BLOG</a>
          </li>
          <li><a href="#">ABOUT ￬</a>
            <ul class="hidden">
              <li><a href="#">Our Mission & Vision</a>
              </li>
              <li><a href="#">Membership</a>
              </li>
              <li><a href="#">Donate us</a>
              </li>
            </ul>
          </li>

        </ul>
      </nav>

媒体：-

@media screen and (max-width: 760px) {
    nav ul , nav h1{
        float: none;
}
    #header img{
        display: block;
        margin: 0 auto;
    }    
}

---

希望它能帮助你

需要HTML和CSS请！当一张图片向我们展示您希望最终结果是什么时，我们需要看看我们在这里使用的代码是什么；但这带来了一个新问题-现在在“主菜单”和“子菜单”之间有一个不需要的间隙（大约50~40px）。请删除媒体中的页边距或

nav ul

。

nav ul{margin:0}

。谢谢！为了您的解决方案！：D

@media screen and (max-width: 760px) {
    nav ul , nav h1{
        float: none;
}
    #header img{
        display: block;
        margin: 0 auto;
    }    
}