Как сохранить Nav bar при смещении при изменении окна

Я новичок в html/css. Моя проблема в том, что когда я изменяю размер окна браузера, текст nav-bar меняет/конденсируется в соответствии с размером окна и искажается. Я бы хотел, чтобы он оставался статичным, поэтому, когда я сужу окно браузера, мне нужно будет прокрутить вправо, чтобы снова увидеть текст. Я также использую bootstrap.Как сохранить Nav bar при смещении при изменении окна

Это мой код:

HTML

<body> 
    <div class="nav"> 
    <div class="container"> 
     <ul class="pull-right"> 
     <li><a href="#">HOME</a></li> 
     <li><a href="#">WINES</a></li> 
     <li><a href="#">GRAPES</a></li> 
     <li><a href="#">ABOUT US</a></li> 
     </ul> 
    </div> 
    </div> 
</body>

CSS

.nav li { 
    display: inline; 
} 

.nav a { 
    color: #5a5a5a; 
    font-size: 20px; 
    font-weight: bold; 
    padding: 14px 10px; 
} 

.nav { 
    position: absolute; 
    top: 20px; 
    right: 0px; 
}

Я попытался с помощью .container {width: 900px;}, но это не помогло. Навигационная панель по-прежнему не остается статической.

источник

2015-05-12 Johnz

Вы можете решить эту проблему, добавив минимальную ширину в div, окружающий навигационную панель.

В вашем случае это было бы в классе .nav

.nav { 
    min-width:165px; 
    position: absolute; 
    top: 20px; 
    right: 0px; 
}

Я не знаю, если вы делили весь код с нами, но из кода вы предоставили 165px должен быть штраф за минимальную ширину , Если присутствует больше кода, что делает навигационную панель разной шириной, вам может потребоваться отрегулировать величину пикселя min-width:.

источник

2015-05-12 04:34:28 Chawbee

-1

Это должно работать

ul { 
    white-space: nowrap; 
}

источник

2015-05-12 04:43:42 tojowe

Я пробовал это, и он не работал, и здесь нет объяснений. –

Это должно работать.

navigation {   
    margin-right: auto;  
    margin-left: auto;  
    width: 70%;  
    max-width: 100%;  
    min-width: 1000px;

источник

2016-06-13 09:23:21 bright

Не могли бы вы расширить этот ответ? http://stackoverflow.com/help/how-to-answer –

спасибо, только минимальная ширина сделала это! – extrablade

Как сохранить Nav bar при смещении при изменении окна

ответ

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