正如您在此处看到的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 -->
答案 0 :(得分:1)
首先,您应该使用CSS重置,因为如果您不重置元素,浏览器会将一些默认样式应用于您的元素,这是您不想要的?你可以谷歌出来,会在那里得到很多,如果你想保持简单,但你想重置,你可以使用下面的代码块并将其粘贴到你的CSS
* {
margin: 0;
padding: 0;
}
Demo(缩小间距)
您似乎应该学习定位,使用position: absolute;
元素,而不将元素包装在position: relative;
容器中,这样,您的position: absolute;
元素将在野外流出。另外,我认为你不想使用absolute
,在这里使用float
是合适的。
了解定位如何重要..
What should you do(见position: relative;
那里?)
每个菜单之间的水平空间是因为您使用显式width
此外,如果您使用float
,则不需要display: inline-block;
我建议你学习CSS Positioning和Floats
答案 1 :(得分:1)
您应该阅读有关CSS Box模型的信息。除此之外,您使用的是position:absolute:当您调整屏幕大小时,它实际上会产生问题。正确使用浮子对于布置网站非常重要。我刚刚为您解决了一些问题, here 是重新设计的菜单。
希望这有帮助。
我的一些改写后的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/ 强>
答案 2 :(得分:0)
答案 3 :(得分:0)
同样在jsfiddle上,您可以使用提供的Normalize.css功能重置默认值。
要访问它,请在左侧窗格中查看,点击Fiddle Options
并勾选Normalized CSS
,然后点击Run
查看更新后的代码。