1

我已经和这个问题斗争了好几天了。我有一个精灵菜单，可以按预期与我的所有悬停事件一起使用，但是我想将完整的徽标放在我的“中心”元素的顶部。当我在 Dreamweaver 中时，它会按预期显示，但是当我使用 Safari 或 Chrome 时，“徽标”元素中的徽标错位了。任何帮助将不胜感激。

这是HTML。

<div id="logo">
<h1 class="logo">
<a href="#" title="Test">Logo</a>
</h1>
</div>
<ul>
 <li><a class="home" href="#">Home</a></li>
 <li><a class="products" href="#">Products</a></li>
 <li><a class="philosophy" href="#">Philosophy</a></li>
 <li><a class="center" href="#">Center</a></li>
 <li><a class="news" href="#">News</a></li>
 <li><a class="myaccount" href="#">My Account</a></li>
 <li><a class="customercare" href="#">Contact Us</a></li>
</ul>​

这是菜单元素之一的 CSS 以及中心图像的 CSS。

ul {
width: 1000px;
margin-top: 100px;
margin-right: auto;
margin-left: auto;
list-style-type: none; 
}

ul li {
float: left;    
}

ul li a {
height: 50px;
display: block;
text-indent: -9999px;
}

/*home*/
ul li a.home {
background-image: url('sprites.optimized.png');
background-repeat: no-repeat;
background-position: 0px 0px;
width: 100px;
}

ul li a.home:hover {
background-image: url('sprites.optimized.png');
background-repeat: no-repeat;
background-position: 0px -50px;
}
/*Main Logo*/
#logo {
position: absolute;
width: 100%;
}

#logo h1 {
/* [disabled]height: 100px; */
/* [disabled]width: 201px; */
margin: -100px 282px;
/* [disabled]padding: 0; */
}

#logo h1 a {
color: transparent;
background: transparent url('CenterLogo.png') no-repeat;
width: 370px;
height: 201px;
top: 10px;
left: 30px;
margin: 0 0;
z-index: 200;
}

/***** Header Logo *****/
h1.logo a {
background: url('CenterLogo.png') no-repeat center right /* Company Logo */;
display: block;
height: 35px /* Sets overall height of header */;
margin: 0px 0 0 -2000px ;
outline: none /* Removes Link Outline */;
position: relative;
text-decoration: none;
top: 0px;
width: 2195px;
}​

编辑 1 -------- Per Tim 我做了以下更改

ul {
    width: 1000px;
    margin-top: 100px;
    margin-right: auto;
    margin-left: auto;
    list-style-type: none;
    display: block;
}
ul li {
    float: left;
    display: block;
}

我还更改了徽标间距并将其切换为相对，以查看是否可以将其放置在正确的位置。

/*Main Logo*/
#logo {
    position: relative;
    width: 100%;
}
#logo h1 {
    /* [disabled]height: 100px; */
    /* [disabled]width: 201px; */
    margin: -100px 282px;
    /* [disabled]padding: 0; */
}

我现在可以让它显示在正确的位置，但是当我缩放窗口时，菜单会远离徽标。

编辑 2 ------ Per Kraz 我做了以下更改。菜单现在按预期运行。

ul {
    width: 1000px;
    margin-top: 100px;
    /*margin-right: auto;*/
    /*margin-left: auto;*/
    list-style-type: none;
    display: block;
}
4

1 回答 1

0

但是，当我缩放窗口时，菜单会远离徽标。

你的标志是一个相对定位的块元素。你的菜单也是一个相对定位的块元素。

您的标志只是出现在它必须出现的地方。（左上角）

但是，您的菜单作为特定宽度（1000 像素）并且它的左右边距设置为auto. 因此，它根据其容器宽度居中。而且由于它可能是正文，因此增加页面宽度会将菜单向右移动。

于 2012-10-16T13:46:45.913 回答