CSS автоматически расширяет плавающий элемент (неизвестная ширина) - PullRequest
Новая
       22

CSS автоматически расширяет плавающий элемент (неизвестная ширина)

2 голосов
/ 17 октября 2011

Моя горизонтальная панель навигации выглядит следующим образом: 


| MENU-ITEM 1 | MENU-ITEM-2 | MENU-ITEM 3 | SEARCH FIELD              |

Элементы меню имеют одинаковую ширину, но поскольку веб-сайт управляется с помощью cms, количество элементов и, следовательно, ширина элемента меню-list изменится.

Я ищу решение CSS для автоматического растяжения поля поиска справа, чтобы использовать 100% оставшегося пространства внутри панели навигации.Общая ширина панели навигации является статической (около 950 пикселей).

html - это что-то вроде этого, но, возможно, мне все равно понадобятся обертки: 

<div id="nav">
   <ul id="nav-items">
      <li class="nav-item">MENU-ITEM 1</li>
      <li class="nav-item">MENU-ITEM 1</li>
      <li class="nav-item">MENU-ITEM 1</li>
   </ul>
   <div id="search-cont">
      <input id="search">
   </div>
</div>

Ответы [ 2 ]

1 голос
/ 17 октября 2011

Вот скрипка с основами: http://jsfiddle.net/Qg2ag/

Идея такова:

  1. Оболочка поля ввода должна иметь display:block и overflow:hidden.
  2. Меню рядом с ним должно иметь float:left, а элементы в нем должны быть inline или inline-block.

Итак, плавающий блок съедает это ширина от блока с переполнением, так что вы можете безопасно установить width: 100% в нем.И я добавил padding-right: 6px к обертке ввода, так что нет необходимости настраивать его ширину или использовать другую блочную модель.Конечно, размер этого отступа может варьироваться, если вы измените стиль ввода.

0 голосов
/ 17 октября 2011

Может быть, это поможет, если вы используете display: inline; и float: left; на li -элементах.Это будет держать их в одну строку.Вы можете стилизовать эти теги сейчас.Если вы используете a-теги внутри li s, вы можете рассмотреть их стилизацию вместо li s.

Панель поиска будет отображаться в одной строке с этими элементами, нотакже остаются на ширине 100%.

Проверьте эту скрипку .

...