Question

我有一个由徽标分割的导航菜单：

 <div id="header">
    <div id="header-container">

       <div class="left-nav">
          <ul>
             <li><a href="#">Home</a></li>
             <li><a href="#">Portfolio</a></li>
             <li><a href="#">Awards</a></li>
         </ul>
      </div>

      <div class="logo">
        <h1>Magdi Designs</h1>
      </div>

      <div class="right-nav">
        <ul>
           <li><a href="#">Testimonials</a></li>
           <li><a href="#">About</a></li>
           <li><a href="#">Contact</a></li>
        </ul>
     </div>

    </div>
 </div>

CSS

 #header {
    height: 60px;
    margin-top: 30px;
 }

 #header-container {
    width: 80%;
    margin: auto;
    position: relative;
 }

 #header li {
    display: inline;
    line-height: 60px;
 }

 #header .left-nav {
    position: absolute;
    top: 0;
    left: 0;
 }

 #header h1 {
    background: url(logo.png) no-repeat;
    width: 284px;
    height: 30px;
    margin-top: 15px;
    text-align: center;
    margin: auto;
 }

 #header .right-nav {
    position: absolute;
    top: 0;
    right: 0;
 }

<h1>徽标标记似乎不适用于上边距。
对不起，如果我放了太多不相关的代码，但我不确定是什么原因引起了这个问题我也试过填充但仍然无效 jsFiddle演示

次要问题：
这是拆分菜单的好方法吗？

Answer 1

尝试：

#header h1 {
    margin: 15px auto 0;
}

而不是：

#header h1 {
    margin-top: 15px;
    margin: auto;
}

Answer 2

您在margin: auto之后设置margin-top: 15px即可删除所需的保证金。无论如何都不需要margin: auto。

为什么保证金顶部不能处理图像替换徽标？

2 个答案: