2013-08-20 2 views
1

Я пытаюсь создать панель навигации с четырьмя элементами, двумя меньшими кнопками, которые будут ссылаться на домашнюю страницу и страницу контакта, а затем две большие кнопки, которые будут ссылаться на две основные части сайта. Я пытаюсь расположить вещи так, чтобы две большие кнопки были центрированы, а две меньшие кнопки слева от них.Панель навигации CSS - центрирование на основе элемента в пределах панели навигации

Я не могу «указать: 0 авто;» две большие кнопки внутри их собственного div, так как я должен был бы установить его на «display: block;»; который устанавливает их на другой строке, чем кнопки меньшего размера, и абсолютно позиционирующие вещи испортили макет, как только окно браузера изменится.

Я чувствую, что мне не хватает чего-то простого здесь. Я иду на это с неправильного угла?

Вот Dabblet того, что у меня есть на данный момент ... http://dabblet.com/gist/6287837

HTML

<div id="nav-container"> 
<div id="small-button-container"> 
    <img src="http://placehold.it/47x22" class="small-button01" /> 
    <img src="http://placehold.it/70x42" class="small-button02" /> 
</div> 
<div id="big-button-container"> 
    <img src="http://placehold.it/360x64" /> 
    <img src="http://placehold.it/360x64" /> 
</div> 
</div> 

CSS

#nav-container{ 
outline: 1px red dashed; 
width: 1000px; 
display: block; 
margin: 0 auto;} 

#small-button-container{ 
display: inline-block; 
width: 136px; 
position: relative; 
top: -22px; 
left: 40px;} 

#big-button-container{ 
display: inline-block; 
width: 780px; 
height: 64px; 
margin-left: 70px;} 

.small-button01{ 
display: inline; 
position: relative; 
left: 5px;} 

.small-button02{ 
display: inline; 
position: relative; 
left: 15px;} 
+1

Здесь вы идете. http://dabblet.com/gist/6288178. Обратите внимание, что для маленьких кнопок недостаточно места – Itay

ответ

1

Вы можете применить position: absolute; к вашему #small-button-container, так что большой кнопки будут центрироваться.

Примечание. Мы помещаем position: relative; в родительский контейнер, поэтому #small-button-container будет располагаться абсолютно относительно его родителя.

CSS

#nav-container { 
    outline: 1px red dashed; 
    width: 1000px; 
    display: block; 
    margin: 0 auto; 
    text-align: center; 
    position: relative; 
} 
#small-button-container { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

Demo

0

В дополнении к позиции: абсолютные вы также можете попробовать использовать отрицательное левое поле на # нав-контейнере, если вы знаете, вычисленную ширину #small -кнопка-контейнер. Вы можете использовать text-align: center в # nav-container. Так как это div, вам не нужно использовать display: block тоже. Если у вас есть дополнительное дополнение на # маленькой кнопке-контейнере, вам нужно принять это во внимание.

#nav-container { 
    margin: 0px auto; 
    text-align: center; 
    margin-left: -136px; 
} 

 Смежные вопросы

  • Нет связанных вопросов^_^