Горизонтальное Резиновое Меню

[eleonore]

Использую display:table; и display:table-cell. Подскажите,пожалуйста,что делать,если в некоторых пунктах меню два слова,а в некоторых одно??"Двухсловесные" пункты при изменении размеров браузера скачут очень не красиво.

При разрешении от 1024 и больше все хорошо:

Когда сужается меньше 1024px происходит следующее:

Задала white-space:nowrap для li, помогло,слова перестали уходить друг под друга.
Но теперь при сужении окна появляется огромная полоса прокрутки:

Как сделать так,чтобы меню плавно сужалось и расширялось в зависимости от разрешения??
html:
<nav>
<ul class="navigation">
<li><a href="#">SEARCH AIRPLANES</a></li>
<li>|</li>
<li><a href="#">RESTORATION</a></li>
<li>|</li>
<li><a href="#">MAINTENANCE</a></li>
<li>|</li>
<li><a href="#">EXHIBITIONS & AIRSHOW</a></li>
<li>|</li>
<li><a href="#">CONTACTS AND FEEDBACK</a></li>
</ul>
</nav>
css:

ul.navigation{
display:table;
width:100%;
}
ul.navigation li{
display:table-cell;
padding:10px;
text-align:center;
white-space:nowrap;
}


Нашла ещё вариант!!
html:

<div class="navig">

<a href="#">SEARCH AIRPLANES</a>|
<a href="#">RESTORATION</a>|
<a href="#">MAINTENANCE</a>|
<a href="#">EXHIBITIONS & AIRSHOW</a>|
<a href="#">CONTACTS AND FEEDBACK</a>
<span class="empty"></span> <!-- элемент, занимающий вторую строку -->
</div>

css:

div.navig{
width: 90%; /* ширина меню */
margin: 0 auto; /* центрирование обертки меню */
text-align: justify; /* растягиваем содержимое меню */
overflow: hidden; /* скрываем не поместившиеся пункты */
}
div.navig a{
text-decoration: none; /* убираем подчеркивание ссылки */
display: inline-block; /* если больше 1 слова в пункте */
color:#47566b; /* цвет ссылок */
width:18%;
text-align:center;
vertical-align:top;
}
.empty{
width: 100%;
display: inline-block;
}
Но при сужении на 1024px слова падают друг под друга,что мне кажется не слишком красиво,хотя вроде и ничего,но все же хочется,чтобы все шло в одну строчку:

О меньших расширениях я молчу,там вообще все в кучу становится.

Я пробовала nowrap,проблемы это моей не решает.при 1024px получаю следующее:

может я вообще не тем путем иду?... ((((

 

[EmptyR]

Мне кажется, что надо подключать так же и JavaScript сюда. Вот что будет, если ужать настолько, что не будет помещаться одно единственное слово, изначально длинное? Да, начнётся фигня полнейшая. Я думаю, надо написать скрипт, который при достижении ширины окна меньше некоторой уменьшает пропорционально сам шрифт списка. Иначе, честно говоря, не знаю, как тут ещё решить проблему.

"Не пытайтесь впихнуть невпи*цензура*ое" (С)

 

[eleonore]

Мне кажется, что надо подключать так же и JavaScript сюда. Вот что будет, если ужать настолько, что не будет помещаться одно единственное слово, изначально длинное? Да, начнётся фигня полнейшая. Я думаю, надо написать скрипт, который при достижении ширины окна меньше некоторой уменьшает пропорционально сам шрифт списка. Иначе, честно говоря, не знаю, как тут ещё решить проблему.

"Не пытайтесь впихнуть невпи*цензура*ое" (С)

Спасибо! :maybe:

Добавлено:

Мне кажется, что надо подключать так же и JavaScript сюда. Вот что будет, если ужать настолько, что не будет помещаться одно единственное слово, изначально длинное? Да, начнётся фигня полнейшая. Я думаю, надо написать скрипт, который при достижении ширины окна меньше некоторой уменьшает пропорционально сам шрифт списка. Иначе, честно говоря, не знаю, как тут ещё решить проблему.

"Не пытайтесь впихнуть невпи*цензура*ое" (С)

Спасибо!