Горизонтальная навигация по CSS, кнопки динамической ширины, ширина 100%, фоновые изображения

Question

Я пытаюсь создать горизонтальную панель навигации с x количеством кнопок с неизвестной шириной слева, изображением шириной 150px с правой стороны, и пространство между кнопками и крышкой увеличивается до 100 % ширины экрана. Я не очень хорош в CSS, и я играл с различными настройками, используя div, таблицы, неупорядоченные списки и комбинации из трех, и не могу заставить его работать должным образом. Сейчас попробую нарисовать в ascii:

<----Button1----><-Button2-><---------------Spacer-----------><!Cap:150px!>

Таким образом, кнопки с левой стороны экрана будут сжиматься, чтобы соответствовать текстовому содержимому, крышка будет с правой стороны экрана, а проставка будет расширяться / сжиматься, чтобы сделать все Сборка заполнить 100% экрана. Изображения PNG с некоторой прозрачностью, поэтому изображения не могут перекрываться.

Спасибо за помощь.

Answer 1

Самое простое решение:

<div id="nav">
  <button type="button">One</button>
  <button type="button">Two</button>
  <button type="button">Three</button>
  <div id="cap">Cap</div>
</div>

с:

#nav { overflow: hidden; }
#nav button { float: left; }
#cap { float: right; width: 150px; }

Прокладка не требуется, так как div в любом случае будет иметь ширину 100% (если только другие CSS не изменят это). Это если вам не нужен конкретный стиль для проставки или есть какая-то другая причина его иметь. Если это просто проблема стиля, примените стиль к внешнему элементу навигации, и содержимое появится над ним, фактически выполнив то же самое.