Как остановить CSS-макет от искажения при увеличении / уменьшении масштаба?

Я создал очень простой сайт с # container div, который включает #navbar и #content. Однако, когда я увеличиваю или уменьшаю масштаб, #navbar искажается, если я увеличиваю ссылки, которые нажимаются ниже друг друга вместо того, чтобы быть встроенными. Если я уменьшу масштаб, между ссылками будет добавлено слишком много отступов. Как я могу это остановить?

HTML-код: 

<div id="navbar">
<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="top.html">Top</a></li>
    <li><strong><a href="free.html">FREE</a></strong></li>
    <li><a href="photo.html">Photo</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact Us</a></li>
</ul>
</div>

<div id="content">

<p>Some sample text.<p>

</div>


</div>

CSS:

#container {

    position: static;
    background-color: #00bbee;
    margin-left: 20%;
    margin-right: 20%;
    margin-top: 7%;
    margin-bottom: 15%;
    border: 2px solid red;


}

#navbar  ul{

    list-style: none;



}

#navbar  li{

    display: inline;

}

#navbar li a{

    text-decoration: none;
    color: #11ff11;
    margin: 3%;
    border: 1px dotted orange;
    padding-left: 4px;

}

#navbar li a:hover {

    background-color: white;
    color: green;

}

#navbar {

    background-color: #eeeeee;
    padding-top: 2px;
    padding-bottom: 5px;
    border: 1px solid yellow;

}

Как я могу остановить его от искажения?

кроме того, я все еще довольно новыми для CSS, меня учили использовать % вместо px. Это правда? И все остальное, что вы должны указать, пожалуйста, дайте мне знать.

спасибо заранее!

17
css distortion zooming

9 ответов

У меня была аналогичная проблема, которую я исправил, добавив дополнительный div вокруг моего навигационного меню. Затем я добавил следующее 

#menu-container {
    position: absolute;
    white-space: nowrap;
    overflow: hidden;

}

это предотвратило его обертывание. Надеюсь, это сработает.

5

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

CSS медиа запросы:

@media screen and (max-width: 320px) { 

/*Write your css here*/

}

@media screen and (max-width: 800px) { 

}

проверить: CSS-трюки + размеры устройств и Медиа-Запросы

2

чтобы устранить проблему с увеличением, попробуйте добавить min-width атрибут внешнего countainer (#container или #navbar?). Настройка min-width предотвращает попытку веб-страницы сжаться ниже указанной ширины (т. е. 300px). Если вы увеличиваете масштаб слишком далеко, вместо элементов внутри <div> спрыгнув на следующую строку, ваша панель навигации перестанет сжиматься, и в нижней части страницы появится полоса прокрутки.

пример (в вашем таблица стилей):

#navbar {min-width:300px;}

еще один хороший способ достичь этого-применить атрибут min-width к телу страницы.

пример (в таблицу):

body {min-width:300px;}

наконец, если вы хотите, чтобы ваш navbar охватывал всю ширину страницы, Используйте {clear:both;} в таблице стилей.

1

Мда....вы уже пробовали добавить свойства min-width/min-height? Вы можете просто включить эти свойства в свой # container div. Это может сработать.

0

различные браузеры пользователя различные методы для увеличения. У всех есть недостатки. Использование процентов приведет к ошибкам округления. Легких ответов нет.

см.:http://www.codinghorror.com/blog/2009/01/the-two-types-of-browser-zoom.html

0

Я бы просто установить абсолютные высоты и ширины для всех элементов/блоков на странице.

идентификатор {высота: шириной 250 пикселей и следующий; ширина: 500px в}

или вы также можете использовать min/max-width / hight для настройки макета страницы на разных размерах экрана или при изменении размера окна браузера.

0

Это в основном потому, что u установили свойства ширины или маржи в процентах. Если вы это сделаете, убедитесь, что u предоставляет максимальную ширину такому элементу

0

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

<style>
body {
    margin:0px;
}
#container {
    width:990px;
    background-color: #00bbee;
    margin:0 auto;
    border: 2px solid red;
}
#navbar ul {
    list-style: none;
}
#navbar li {
    display: inline;
}
#navbar li a {
    text-decoration: none;
    color: #11ff11;
    margin: 3%;
    border: 1px dotted orange;
    padding-left: 4px;
}
#navbar li a:hover {
    background-color: white;
    color: green;
}
#navbar {
    background-color: #eeeeee;
    padding-top: 2px;
    padding-bottom: 5px;
    border: 1px solid yellow;
}
</style>

<div id="container">
  <div id="navbar">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="top.html">Top</a></li>
      <li><strong><a href="free.html">FREE</a></strong></li>
      <li><a href="photo.html">Photo</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact Us</a></li>
    </ul>
  </div>
  <div id="content">
    <p>Some sample text.
    <p> 
  </div>
</div>
0

вы захотите использовать медиа-запрос css для установки точек останова для разных стилей в вашем css. Что при правильном использовании исправит любые проблемы искажения.

0