CSS Nav Bar Padding и переполнение

Question

CSS Nav Bar Padding и переполнение

0

Поэтому у меня есть горизонтальная панель навигации, созданная в CSS. Моя проблема в том, что на панели, похоже, есть нижнее дополнение, но я не знаю, откуда оно.

Кроме того, когда навигационная панель становится очень узкой (изменение размера окна, мобильного телефона и т.д.), Она переполняется из окружения div. Как я могу это предотвратить?

Вот JSFiddle:

http://jsfiddle.net/m8pWa/

CSS:

 html, body {
    margin: 0;
    padding: 0;
    background-color: #E0F2F7;
}
.header {
    margin: 0 auto;
    text-align: center;
    background-color: #81BEF7;
    padding: 1px;
    color: #FAFAFA;
}
ul {
    margin: 0;
    padding: 0;
}
.nav {
    margin: 0 auto;
    padding: 0;
    width: 75%;
    height: 2em;
}
.nav ul li {
    list-style-type: none;
    display: inline;
    overflow: hidden;
}
.nav li a {
    display: block;
    float: left;
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
    border-right: 1px solid #fff;
}
.nav li a:hover {
    background: white;
    color: #A4A4A4;
}
.nav-wrapper {
    background-color: #58ACFA;
    padding: 1px;
}
.wrapper {
    margin-right: auto;
    margin-left: auto;
    width: 75%;
}
/* this centers the internal elements */
 .centered {
    text-align: center;
}
/* gives a main content window to the left that is 70% of the main */
 .content {
    width: 70%;
    float:left;
}
/* makes a sidebar to the right that is 30% of the main and floating right */
 .sidebar {
    width: 30%;
    float:right;
}
.sidebar ul {
    padding: 10px;
}

Aristides 09 нояб. 2013, в 02:57

Источник

Теги:

html

css

2 ответа

1

Ничего не делать с padding на этот раз. У вас есть высота, установленная на height исправления, я изменил ее на 1.74ems и это было на месте.

.nav {
  margin: 0 auto;
  padding: 0;
  width: 75%;
  height: 1.74em;
 }

Для того, чтобы навигация рухнула, когда размер экрана задан,

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

В этом случае, если вам нужно будет поддерживать мобильные устройства и следует искать media queries.

JSFIDDLE

Josh Powell 08 нояб. 2013, в 22:16

0

Я обязательно посмотрю на медиа-запросы, спасибо. (Я приму через 3 минуты, когда ТАК позволяет мне)
Aristides 09 нояб. 2013, в 01:19
0

Они очень приятные и простые в использовании! Я рад, что мог бы помочь и удачи в вашем дизайне. Вот хорошее руководство по ним, css-tricks.com/css-media-queries .
Josh Powell 09 нояб. 2013, в 01:24
0

спасибо я посмотрю на это
Aristides 09 нояб. 2013, в 01:27

Показать ещё 1 комментарий

Ещё вопросы

Я обязательно посмотрю на медиа-запросы, спасибо. (Я приму через 3 минуты, когда ТАК позволяет мне)
Они очень приятные и простые в использовании! Я рад, что мог бы помочь и удачи в вашем дизайне. Вот хорошее руководство по ним, css-tricks.com/css-media-queries .

Stuart Kershaw · Accepted Answer · 2013-11-08T22-45-00.000Z

Ваши элементы должны заполнять пространство естественным образом, а .nav не должно зависеть от явной высоты. Это позволит изменить такие параметры, как font-size и т.д., И предотвратить переполнение дочерних элементов родителями.

Здесь решение: http://jsfiddle.net/m8pWa/3/

Удалите высоту .nav.

On .nav li a, change display: block; для display: inline-block; , и удалите float: left; ,

.nav {
    margin: 0 auto;
    padding: 0;
    width: 75%;
}

.nav li a {
    display: inline-block;
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
    border-right: 1px solid #fff;
}

отличный ответ! навигация, независимо от высоты, была поучительной. Как бы я убрал небольшую рамку вокруг кнопок сейчас?
Спасибо за отзыв @Aristides. Регистрируемся на границе сейчас.