0

如果我将 #header 上的填充设置为 0，这样它和下面的导航栏之间就没有空格，导航栏中的项目就会像这样向右移动：

如果导航菜单和标题之间的空间小于 2 像素，则会执行此操作 - #header 上的填充设置为“填充：2px 0;”，或者如果 #header 的高度设置为小于 152像素。

图像的高度正好是 150 像素。

当空间小于两个像素时，它会执行以下操作：

在此处输入图像描述

它应该看起来像这样，但标题图像和导航栏之间没有空格

在此处输入图像描述

CSS：

#header {
    height: 150px;
    padding:0px 0;
    background: url(images/HeaderBackground1.png) left top repeat-x;
}

.logo {
    float: left;
    margin-left: 15px;
}

.logo h1.site_title {
    margin: 0;
    padding:0;
    font-family: Arial, Helvetica, Sans-serif;
    font-size:48px;
    line-height: 40px;
    font-weight: bold;
}

.logo h1.site_title a, .logo h1.site_title a:hover {
    color: #13365E;
    text-decoration: none;
}

.logo h2.site_description {
    margin: 0;
    padding:0;
    color: #13365E;
    font-family: Arial, Helvetica, Sans-serif;
    font-size:14px;
    line-height: 14px;
}

.header-right {
    float: right;
}

#top-social-profiles {
    padding-top: 10px;
    height: 32px;
    text-align: right;
    margin-right: 15px;

}
#top-social-profiles img {
    margin: 0 0 0 6px !important;
} 

#top-social-profiles img:hover {
    opacity: 0.8;
}
#top-social-profiles .widget-container {
  background: none;
  padding: 0;
  border: 0;
}

/* =MENUS
-------------------------------------------------------------- */

/* Menu Primary
----------------------------*/

.menu-primary-container {
    padding:0;
    position:relative;
    height: 40px;
    background: url(images/menu-primary-bg.png) left top repeat-x;
    z-index: 400;
}

.menu-primary {
}

.menu-primary ul {
    min-width: 160px;
}

/* First Level - Menu Primary */

.menu-primary li a {
    color: #FFFFFF;
    padding: 15px 15px 14px 15px;
    text-decoration: none;
    font-family: 'Georgia', serif;
    font-size: 12px;
    text-transform:uppercase;
    font-weight: normal;
}

HTML

<div id="container">

    <div id="header">

        <div class="logo">

            <a href="http://newerafreedom.com"><img src="http://newerafreedom.com/wp-content/themes/MyPen/images/HeaderImage1.png" alt="New Era Freedom" title="New Era Freedom" /></a>

        </div><!-- .logo -->


        <div class="header-right">
            <div id="top-social-profiles">
                            </div>
        </div><!-- .header-right -->

   </div><!-- #header --> 



            <div class="clearfix">
                        <div class="menu-primary-container"><ul id="menu-main" class="menus menu-primary"><li id="menu-item-51" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-51"><a href="http://www.newerafreedom.com">Home</a></li>
</ul></div>              <!--.primary menu-->   
                </div>

    <div id="main">


        <div id="content">
4

0 回答 0