HTML / CSS - центральная навигационная панель переменного размера - PullRequest
Новая
       19

HTML / CSS - центральная навигационная панель переменного размера

1 голос
/ 11 марта 2011

У меня будет навигационная панель, которая позволяет пользователю сортировать галерею изображений.Проблема в том, что ширина панели навигации будет изменяться в зависимости от размера галереи, и когда я не устанавливаю ширину, я не могу использовать margin: 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; }

Есть идеи, как это исправить?

Ответы [ 3 ]

3 голосов
/ 11 марта 2011

Он идет влево, потому что вы используете float: left;, который выводит ахоры за пределы нормального потока.То, что вы, вероятно, хотели сделать, это установить для якорей значение display: inline-block; и центрировать содержимое DIV.Это должно поддерживаться во всех браузерах, поскольку IE6 поддерживает inline-block для элементов, которые изначально встроены.

0 голосов
/ 11 марта 2011

Вы можете прочитать ширину с помощью Javascript и добавить ее динамически в ваш #nav_container. После этого вы можете выровнять Контейнер с полем: 0 auto;

0 голосов
/ 11 марта 2011

Мой предпочтительный подход в этом случае - установить элемент контейнера на text-align: center;, а элемент, который вы хотите центрировать на display: inline-block;

Вы должны будете установить центрированный элемент для отображения «inline» в IE <8; </p> 

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

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

Но я не Эрик Мейер, так что ...

...