Я пытаюсь создать панель навигации с четырьмя элементами, двумя меньшими кнопками, которые будут ссылаться на домашнюю страницу и страницу контакта, а затем две большие кнопки, которые будут ссылаться на две основные части сайта. Я пытаюсь расположить вещи так, чтобы две большие кнопки были центрированы, а две меньшие кнопки слева от них.Панель навигации 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;}
Здесь вы идете. http://dabblet.com/gist/6288178. Обратите внимание, что для маленьких кнопок недостаточно места – Itay