0

正如您在此处看到的http://jsfiddle.net/FqW4R/和下图所示，我的菜单项与“徽标”和“社交”并不完全一致。菜单类别（菜单 I、菜单 2 等）和子项目之间也存在巨大差距。当我查看我的代码时，我看不到额外的填充或任何可能导致此类问题的东西。对此有什么想法吗？非常感谢

在此处输入图像描述

Html, body {
    margin: 0;
    padding: 0;
    background: #fff;
    font-family: 'Open Sans', sans-serif; 
}

#logo {
    position: absolute;
    top: 35px;
    left: 20px;
    color: #000;
    font-size: 20px;
}

/* mainmenu */

#mainmenu {
    float:right;
    margin-top: 35px;
    padding-bottom: 10px; 
    overflow: hidden;
}
#mainmenu ul {
    float: right;
    margin: 0;
    color: #000;
    list-style: none;
}
#mainmenu ul li {
    display: inline-block;
    float: left;
    width: 140px;
    line-height: 20px;
}
#mainmenu>ul>li {
    margin-left: 20px;
}
#mainmenu ul li a {
    display: block;
    text-decoration: none;
    font-weight:600;
    font-size: 12px;
}
#mainmenu ul li a, #mainmenu ul ul:hover li a {
    color: #333;
    -webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    -moz-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    -ms-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    -o-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    -webkit-transition-duration: .4s, .4s, .4s, .4s;
    -moz-transition-duration: .4s, .4s, .4s, .4s;
    -ms-transition-duration: .4s, .4s, .4s, .4s;
    -o-transition-duration: .4s, .4s, .4s, .4s;
    transition-duration: .4s, .4s, .4s, .4s;
    -webkit-transition-property: all, -webkit-transform;
    -moz-transition-property: all, -moz-transform;
    -ms-transition-property: all, -ms-transform;
    -o-transition-property: all, -o-transform;
    transition-property: all, transform;
}
#mainmenu ul ul li a:hover, #mainmenu ul ul li.current-menu-item a {
    color: #005EBC;
    -webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    -moz-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    -ms-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    -o-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    -webkit-transition-duration: .4s, .4s, .4s, .4s;
    -moz-transition-duration: .4s, .4s, .4s, .4s;
    -ms-transition-duration: .4s, .4s, .4s, .4s;
    -o-transition-duration: .4s, .4s, .4s, .4s;
    transition-duration: .4s, .4s, .4s, .4s;
    -webkit-transition-property: all, -webkit-transform;
    -moz-transition-property: all, -moz-transform;
    -ms-transition-property: all, -ms-transform;
    -o-transition-property: all, -o-transform;
    transition-property: all, transform;
}

#social {
position: absolute;
    float:right;
    right: 10px;
    Color: blue;
    margin-top: 35px;
}

HTML

  <div id="logo">Logo</div>  <!-- End DIV Logo -->
  <div id="mainmenu">
    <ul>
      <li>
        <h5>Menu I</h5>
        <ul>
          <li><a title="" href="">Biography</a> </li>
          <li><a title="" href="">Publications</a> </li>
        </ul>
      <li>
        <h5>Menu 2</h5>
        <ul>
          <li><a title="" href="">Demo</a> </li>
          <li><a title="" href="">Features</a> </li>
          <li><a title="" href="">Comparison</a> </li>
        </ul>
      </li>
      <li>
        <h5>Menu 3</h5>
        <ul>
          <li><a title="" href="">Item 1</a> </li>
          <li><a title="" href="">Item 2</a> </li>
          <li><a title="" href="">Item 3</a> </li>
        </ul>
      </li>
      <li>
        <h5>Menu 4</h5>
        <ul>
          <li><a title="" href="">ddfd</a> </li>
          <li><a title="" href="">dsfd</a> </li>
        </ul>
      </li>
    </ul>
  </div>  <!-- End DIV Main Menu -->
 <div id="social">Social</div><!-- End DIV Social -->
4

4 回答 4

1

您应该阅读有关 CSS Box 模型的信息。除此之外，您正在使用 position:absolute: 当您调整屏幕大小时，它实际上会产生问题。正确使用花车对于布局网站很重要。我刚刚为您解决了其中一些问题，这是重新设计的菜单。

希望这可以帮助。

下面是我重写的一些 CSS。

#social {
border:1px solid green;
    float:left;
    width:120px;
    Color: blue;

}

#mainmenu {
    float:left;
    border:1px solid red;
    padding-bottom: 10px; 
    overflow: hidden;
}


#logo {
    float:left;
    color: #000;
    font-size: 20px;
    border:1px solid black;

    width:150px;
}

http://jsfiddle.net/FqW4R/6/

于 2013-09-05T15:58:23.620 回答
1

首先，你应该使用 CSS 重置，因为如果你不重置元素，浏览器会为你的元素应用一些默认样式，这是你不想要的吧？你可以谷歌出来，会得到很多，如果你想简单地保留它但你想重置，你可以使用下面的代码块并将它粘贴到你的 CSS

* {
    margin: 0;
    padding: 0;
}

演示（缩小间距）

看来你应该学习定位，你正在使用position: absolute;元素，而不是将元素包装在position: relative;容器中，这样你的position: absolute;元素就会在野外流出。另外，我认为您不想使用absolute, usingfloat在这里是合适的。

看看定位的重要性..

你在做什么

你应该怎么做（看到position: relative;那里？）

每个菜单之间的水平空间是因为您使用显式width

演示

此外，如果您使用float，则不需要display: inline-block;

我建议你学习CSS Positioning and Floats

于 2013-09-05T15:53:00.723 回答
0

同样在 jsfiddle 上，您可以使用提供的Normalize.css功能来重置默认值。

要访问它，请查看左窗格，单击Fiddle Options并打勾Normalized CSS，然后单击Run以查看更新的代码。

于 2013-09-05T15:57:29.463 回答
0

您的h5元素上有边距。要修复，只需将其放在您的 CSS 中：

h5 {
    margin:0;
}

http://jsfiddle.net/shaunp/FqW4R/1/

于 2013-09-05T15:52:22.093 回答