Изготовление Navbar не всплывают на следующую строку при изменении размера

Пример здесь: http://rakavus.net/pvpguides/navbar.html Изготовление Navbar не всплывают на следующую строку при изменении размера

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

Использование переполнения: скрытый не дает желаемого эффекта, так как он избавляется от li во-вторых, браузер не может соответствовать всему. (чтобы увидеть это добавление переполнения: скрыть к ли, а затем изменить размер окна немного больше, чем нужно, а затем медленно сделать его меньше.)

Это должно быть сделано с помощью встроенного блока, но ни один из способов Кажется, я пытался получить желаемый результат.

источник

2014-02-05 Programmer XYZ

Вам нужно добавить ширину к контейнеру ul. Удалить поплавки и левые правила из контейнеров и сделать вместо этого:

#centeredmenu ul { 
    position : relative; 
    width : 840px; 
    margin : 0 auto; 
    overflow: hidden; 
} 

#centeredmenu ul li { 
position : relative; 
float: left; 
}

Вот редактировать основанный на вашем примере http://jsfiddle.net/ETsR8/

источник

2014-02-05 18:37:21

Попробуйте это:

#centeredmenu > ul 
{ 
    float:none; 
    text-align: center; 
    white-space:nowrap; 
} 

#centeredmenu > ul > li 
{ 
    float: none; 
    display: inline-block; 
}

много CSS. Я скопировал его для скрипки и добавил некоторые новые определения. Вы можете увидеть результат здесь: http://jsfiddle.net/NicoO/SpVWV/

источник

2014-02-05 18:34:54

В то время как это ближе, в нем возникает проблема с фоном, слегка исчезающим при изменении размера. –

Инкапсулируйте все это с <table width='900'><tr><td> ... </td></tr></table> который даст ему фиксированную ширину работать с. Я попробовал, и он работает здесь.

например.

<body> 
<table width='900'><tr><td> 
<div id="centeredmenu"> 
<ul> 
... 


... 
<li><a href="arms_warrior_intro.html">Arms</a></li> 
</ul> 
</li> 
</ul> 
</div> 
</td></tr></table> 
</body>

(я думаю, что было бы неплохо обновить CSS для дизайна жидкости работать должным образом, .. вместо того, чтобы попытаться заставить это фиксированную ширину, но это уже другой вопрос выходит за рамки вашего вопроса .)

источник

2014-02-05 19:12:21

Изготовление Navbar не всплывают на следующую строку при изменении размера

ответ

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