Исправление нечетного расстояния между элементами на моем сайте

Question

Эй, похоже, у меня проблема с CSS, касающаяся расстояния между <div> на моем сайте.

Если вы укажете свой браузер на www.marioplanet.com, вы увидите странное место послемоя навигационная панель в стиле Apple.

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

Спасибо!

Answer 1

Если вы измените ширину, глобальный заголовок будет работать.

#globalheader { height:37px; margin:auto; position:relative; width:515px; z-index:1; }

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

Answer 2

Хорошо, проблема связана с фиксированной шириной:

#globalheader{
      width: 769px;  //this is too small and actually not needed.
}

Содержащийся список (#globalnav) имеет визуализированную ширину 830 пикселей (в конце у него есть пробел, поэтому он не исследовал, откуда он пришел. Поэтому, если вы удалите фиксированную ширину из globalheader и добавите margin- Слева от 200px до #globalnav вы отцентрируете его и освободите место.

Кроме того, если вы видите, почему в вашем списке есть пробелы справа от него, расширяя его размер до 830 пикселей, вы можете просто сделать поле left-margin и margin-right для auto и центрировать список внутри глобального заголовка div. .

Выяснили, где дополнительное пространство в конце ul берется из элементов списка gn-itunes и gn-support, которые рендерится с шириной 103px. это происходит из (#globalheader #globalnav LI A css rule) Вы можете переопределить ширину в (#globalheader #globalnav li # gn-support A), а также (#globalheader #globalnav li # gn-itunes A) css правила и это должно исправить это, не прибегая к исправлению выше.

Answer 3

Избавьтесь от 18px части поля в элементе globalheader, затем измените ширину элемента globalnav на 1000px:

globalnav {

Маржа: 0; обивка: 0; ширина: 1000px; }

Answer 4

Возможно, вы захотите удалить элементы gn-ipad, gn-itunes и gn-support

из вашего HTML.

Answer 5

У этого #globalheader DIV, содержащего строку меню, вертикальное поле составляет 18 пикселей (сверху и снизу). Поэтому, естественно, то, что следует, смещено на 18 пикселей.

#globalheader {
height:37px;
margin:18px auto;
position:relative;
width:771px;
z-index:1;
}

Answer 6

Это из-за <a></a> присутствующего в <li id="gn-support"><a></a></li>