1

ユーザーが写真のギャラリーを並べ替えることができるナビゲーションバーを用意します。問題は、ナビゲーションバーの幅がギャラリーのサイズに基づいて変化することです。幅を設定しないと、マージンを使用できません。0 auto; メニューを中央に配置します。（代わりに、すべてがギャラリーコンテナの左側に表示されます。）

これがhtmlです：

        <div id="nav_container">
            <div id="timeline_nav">
                <!--<a class="arrow left" />-->
                <a class="toggle"/>
                <a class="toggle"/>
                <a class="toggle"/>             
                <a class="toggle"/>
                <!--<a class="arrow right disabled" />-->
            </div>          
        </div>

そしてcss：

#nav_container { width:100%;height:20px; position:absolute; bottom:10px; background-color:#000;}
#timeline_nav { position:relative;margin:0 auto; }
#timeline_nav a { display:block; float:left; cursor:pointer; overflow:hidden; }
#timeline_nav a.toggle { width:4px; height:4px; padding:2px; margin:0 2px; background:url(http://images.apple.com/iphone/gallery/images/nav-ticks-20100607.png) 50% 0 no-repeat; }

これを修正する方法はありますか？

4

3 に答える 3

3

を使用しているため、左に移動しますfloat: left;。これにより、achorsが通常のフローから外れます。おそらくあなたがやろうとしていたことは、アンカーをに設定し、display: inline-block;その内容を中央に配置することでしたDIV。inline-blockIE6は元々インラインの要素をサポートしているため、これはすべてのブラウザーでサポートされている必要があります。

于 2011-03-10T22:40:43.007 に答える
0

この場合の私の好ましいアプローチは、コンテナ要素をに設定し、text-align: center;中央に配置する要素を設定することです。display: inline-block;

IE <8で「インライン」を表示するには、中央の要素を設定する必要があります。

#nav-container {
  text-align: center;
}

#timeline-nav {
  display: inline-block;
  *display: inline; /* IE6 and IE7 hack */
}

しかし、私はエリック・マイヤーではないので...

于 2011-03-10T22:41:47.280 に答える
0

Javascriptで幅を読み取り、それを動的に#nav_containerに追加できます。その後、コンテナをマージンに揃えることができます：0 auto;

于 2011-03-10T22:44:39.337 に答える