0

固定 div に問題があります。ロゴを右にインデントしたいので、ロゴがやや中央にインデントされ、ナビゲーション リンクが左にインデントされます。しかし、Web ブラウザー ウィンドウのサイズを左に変更すると、リンクがロゴの上に表示され、その逆も同様です。

div を固定し、サイズ変更時にロゴとリンクを同じ位置に維持する方法はありますか? または、サイズを変更すると、それらはどちら側にも一緒に移動します。

http://jsfiddle.net/marrto/Dtz2C/

<div id="container">
<div id="nav"> <div>
  <spanl> 
         <a href="index.html"> LOGO IMAGE </a>
  </spanl>
  </div> 

<div>
<spantr>
    <ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Merchandise</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</spantr>
</div>


#nav {
position:fixed;
left:0px;
top:0px;
height:55px;
width:100%;
background:#999;
}

#container div spanl{
position:absolute;
top:0px;
left:500px;;
padding: 1em;



 }
 #container div spanr{
position:absolute;
top:0px;
right:500px;
padding: 1em;
margin-left: auto;
margin-right: auto;

 }


ul {
 overflow: visible;
 list-style-type: none;

 }

li {
height: 15px;
float: left;
margin-right: 0px;
margin-top: -10px;
 border-right: 1px solid #aaa;
padding: 0 10px;

}

li:last-child {
border-right: none;
}
4

1 に答える 1