-1

私のヘッダーには、画像の両側に画像スプライトがあるロゴがあります。それらをブラウザの上部に水平に中央揃えしようとしています。ヘッダーは配置する必要があります: 固定します。

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 を省略しました。私が得ることができる助けに感謝します。ありがとう！

4

1 に答える 1

0

ヘッダーとロゴの幅はすでにわかっています。次に、それぞれにulが必要であることがわかり、すべてをorwidth: 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 の代わりにクラスを使用することをお勧めします。JavaScript などのより重要なものの ID タグを保存するだけでなく、複数のクラスを 1 つのオブジェクトに追加することにより、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>
于 2013-03-05T18:34:17.083 に答える