Прыгает текст при изменении масштаба

[Lady_V]

Здравствуйте, перерыла весь инет, немогу найти как правильно сверстать блок, чтобы при изменении масштаба не прыгал текст, вот у меня есть код для меню, когда я уменьшаю масштаб страницы последний пункт меню спрыгивает вниз, что делать?

вот код,

<div id="menu">
            <ul>
                <li><a href="">Пункт</a></li>
                <li><a href="">Пункт</a></li>
                <li><a href="">Пункт</a></li>
                <li><a href="">Пункт</a></li>
                <li><a href="">Пункт</a></li>
                <li><a href="">Пункт</a></li>
                <li><a href="">Пункт</a></li>
                <li><a href="">Пункт</a></li>
                <li><a href="">Пункт</a></li>
            </ul>
        </div>

 

CSS

#menu ul{
    margin-top: 5px;
    font-size: 12px;
}
#menu ul li{
    display: inline;
    list-style: none;
}
#menu ul li a{
    text-decoration: none;
    color: black;
    padding: 3px 24px
}
#menu ul li a:hover{
    background: #e27e0f
}

Edited December 30, 2014 by Lady_V

[psywalker]

#menu ul{    margin-top: 5px;    font-size: 12px;white-space: nowrap;}#menu ul li{    display: inline-block;    list-style: none;}

Либо через display-table;

[Lady_V]

#menu ul{    margin-top: 5px;    font-size: 12px;white-space: nowrap;}#menu ul li{    display: inline-block;    list-style: none;}

Либо через display-table;

 

с таким раскладом текст выходит за рамки родительского блока((

[psywalker]

 

#menu ul{    margin-top: 5px;    font-size: 12px;white-space: nowrap;}#menu ul li{    display: inline-block;    list-style: none;}

Либо через display-table;

 

с таким раскладом текст выходит за рамки родительского блока((

 

Дай-ка сслылочку на живую стриницу чисто с этим примером.

[Lady_V]

 

 

#menu ul{    margin-top: 5px;    font-size: 12px;white-space: nowrap;}#menu ul li{    display: inline-block;    list-style: none;}

Либо через display-table;

 

с таким раскладом текст выходит за рамки родительского блока((

 

Дай-ка сслылочку на живую стриницу чисто с этим примером.

 

http://jsfiddle.net/cujcsrws/ ну както так

[psywalker]

 

http://jsfiddle.net/cujcsrws/ ну както так

Не вижу выходящий текст за рамки родительского блока. Какой браузер? И при каких раскладах? Сделай именно пример с проблемой. И + дай скриншоты как должно быть.

[Lady_V]

браузер мозилла, но в примере уже есть проблема, только ее видно, если уменьшаешь страницу до 80 %, слово форум вылазит вправо, я так понимаю надо же, чтобы при любых расширениях оставалось всё как есть

Edited December 30, 2014 by Lady_V

[psywalker]

в примере есть проблема, но ее видно только, если уменьшаешь страницу до 80 %, слово форум вылазит вправо, я так понимаю надо же, чтобы при любых расширениях оставалось всё как есть

у меня ничего не вылезает.

[Lady_V]

ха...ну понятное дело) я же дала не ту ссылку) простите...

http://jsfiddle.net/Lady_V/ba2snnxj/

вот здесь у меня прыгает меню, когда уменьшается размер экрана, как сделать так, чтобы он не менял положение, а уменьшался пропорционально

Edited December 30, 2014 by Lady_V

[psywalker]

а если так сделать:

#menu ul{
    margin-top: 5px;
    font-size: 12px;
    white-space: nowrap;

 

padding: 0;
}

[Lady_V]

а если так сделать:

#menu ul{

    margin-top: 5px;

    font-size: 12px;

    white-space: nowrap;

 

padding: 0;

}

увы...не помогает

[psywalker]

Странно, мне тут помогло, сразу перестало вылезать)

[Lady_V]

а какой браузер у вас? у меня в мозилле прыгает меню, когда уменьшаю масштаб (ctrl - ) не пойму в чем дело (((

[psywalker]

а какой браузер у вас? у меня в мозилле прыгает меню, когда уменьшаю масштаб (ctrl - ) не пойму в чем дело (((

У меня тоже мозила, но я уменьшаю масштаб и до -50% всё в порядке. Только на -50% меню начинает чуть вылезать справа.