Question

在我的标题中，我有一个徽标，图像两侧都有一个图像精灵。我试图将它们水平居中到浏览器的顶部。标题必须定位：固定。

HTML：

<div id="headerbg">             
            <div id="header">
                <ul id="navleft">   
                    <li id="navhome"><a href="#top"></a></li>
                    <li id="navnew"><a href="#new"></a></li>
                    <li id="navbrands"><a href="#brands"></a></li>
                </ul>               
                <div id="logo"></div>
                <ul id="navright">  
                    <li id="navsales"><a href="#sales"></a></li>
                    <li id="navlocation"><a href="#location"></a></li>
                    <li id="navcontact"><a href="#contact"></a></li>
                </ul>
            </div>          
        </div>

CSS：

#headerbg
{
background-color: #ffffff;
width:100%;
height:50px;    
z-index: 1000;
position: fixed;
top: 0;
left:0;
}

#header
{   
width: 800px;
height: 100px;
margin: auto;
}

#logo
{
width:200px;
height:100px;
background:url(images/logo_small.jpg);
display:inline-block;
z-index: 2000;      
}

/* NAVIGATION */

#navleft
{
position:relative;

}

#navleft li
{
margin:0;
padding:0;
list-style:none;
position:absolute;
top:0;
z-index: 2000;
}

#navleft li, #navleft a
{
height:50px;
display:block;
}

#navright
{
position:relative;

}

#navright li
{
margin:0;
padding:0;
list-style:none;
position:absolute;
top:0;
z-index: 2000;
}

#navright li, #navright a
{
height:50px;
display:block;
}

我遗漏了CSS用于精灵的悬停图片以缩短我的帖子。我感谢任何帮助。谢谢！

Answer 1

您已经知道标题和徽标的宽度。然后，您知道每个ul都应该有一个width: 300px;，并将它们全部设置为float:left;或display:inline;

#header ul {
    width:300px;
}

#header {
    display:inline-block;
    *display:inline; /* IE hack */
}

修改

您还可以为伪元素应用特定的CSS样式，例如：

#header ul:first-child { width:300px; position:relative; top:0; left:0; } #header ul:last-child { width:300px; position:relative; right:0; left:0; }

我已经重新输入了您的代码以满足您的需求（我认为是您的需求）

请点击此处http://jsfiddle.net/aLQYS/

对于未来，我建议你使用类而不是Id。你不仅可以为更重要的东西保存ID标签，例如javascript，而且还可以通过向一个对象添加多个类来重用css样式，例如。

<强> CSS

.shadow { box-shadow: 1px 1px 5px rgba(0,0,0,0.5); } .box { width:200px; height:200px; }

<强> HTML

<div class="shadow box"></div>

如何在绝对定位的两个UL之间放置图像？

1 个答案: