Меню вытекает из div при уменьшении окна браузера или масштабировании с ним - PullRequest
Новая
       3

Меню вытекает из div при уменьшении окна браузера или масштабировании с ним

0 голосов
/ 23 апреля 2020

Это полный код: 

<!doctype html>
<html>
    <head>
        <style>
            body {
                overflow-x: hidden; 
                text-align: center;
            }
            div#box {               
                background-color: green;
                border-radius: 1em;        
                opacity: 0.6;
                margin: 0em 2.5em 0em 2.5em;
                padding: 1em;   
            }
            li {
                display: inline;
                margin: 0em;
                padding: 0em;
                white-space: nowrap;
            }
            ul {
                list-style-type: none;
                margin: 0em;
                padding: 0em;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <ul>
                <li><a href="#">Option 1</a></li>&nbsp;&nbsp;
                <li><a href="#">Option 2</a></li>&nbsp;&nbsp;
                <li><a href="#">Option 3</a></li>                       
            </ul>
        </div>
    </body>
</html>

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

1 Ответ

0 голосов
/ 23 апреля 2020

Хорошо, если кто-то случайно увеличил вашу страницу до 500%, это должно решить эту проблему:
Вы можете установить <ul> на position: relative, а #box на position: absolute и текст никогда не должен выходить за границы своего родителя. Тем не менее, это приведет к тому, что фон / элемент #box прекратит работу на краю своего содержимого, поэтому, чтобы сделать зеленый фон более широким, как вам кажется, нужно просто установить определенную ширину или использовать padding-top et c values.

Удаление whitespace: nowrap работает, но не при уменьшении окна браузера наполовину и полном увеличении (оно по-прежнему выходит за границы div).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...