Почему мой навигационный элемент не идет в центр или не меняет стиль?

0

Я пытаюсь получить мой элемент навигации в центре, но он не будет работать для более старых версий Internet Explorer или Chrome. Это также не изменит стиль. Как я могу заставить это сосредоточиться и измениться? Вот код:

Навигатор:

<nav id="Nav">
    <a href="TMR Library.html">Library</a> |
    <a href="TMR Contact.html">Contact</a> |
    <a href="TMR About.html">About</a>
</nav>

CSS

#Nav {
    margin:0 auto;
    font-size: 40px;
    color: #22b14c;
    font-family: "Papyrus";
}
  • 0
    Я думаю, что @ user2784439 думал, что margin:0 auto; nav элемент nav ; однако width указана. @ user2784439, без указания width , поля не могут расширяться до краев, потому что block элементы, такие как nav имеют ширину по умолчанию 100% .
  • 0
    Меню обычно создается в виде списка. Семантически это также более логично. Сделайте ul с li элементами, которые содержат ссылки. Таким образом, гораздо проще создавать подменю.
Теги:
margin
nav

5 ответов

10
Лучший ответ

Есть много способов сосредоточить элементы:

Маржа:

С установленной шириной или display: inline-block; вы можете использовать:

margin-left: auto;
margin-right: auto;

text-align:

С установленной шириной или display: inline-block; вы можете добавить это к родительскому:

text-align: center;

Абсолютный путь:

position: absolute;
left: 50%;
margin-left: width/2;

или

position: absolute;
left: 50%;
transform: translate(0, -50%);

Также не беспокойтесь слишком много о ie7 и ниже, поскольку большинство людей используют более высокие версии ie или другого браузера, хотя это должно работать до тех пор, пока ie6

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

Поделиться
2

Используйте ниже:

text-align: center;

вместо

margin 0 auto;

Пример скрипта

Примечание. Предполагалось, что вы не хотите указывать ширину. В противном случае вы можете просто использовать margin как уже указано в других ответах.

EDIT: Чтобы использовать теги <nav> и другие теги HTML5 с более низкой версией IE, вы можете использовать HTML5shiv.js (включив скрипт ниже).

<script src='http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js' type='text/javascript'></script>
Поделиться
  • 0
    благодаря этому он работает в chrome, но он все еще не работает в старых версиях Internet Explorer и не меняет шрифт и т. д. Как я могу это сделать?
  • 0
    @ user2784439: Старые версии IE, у меня нет, поэтому дайте мне немного времени проверить их (это должно работать). Шрифт правильно работает в скрипке. Вы смотрели на это?
Показать ещё 7 комментариев
0

Использование:

  #Nav 
  {
     margin-left:auto;
     margin-right:auto;
     width: 12em;
     font-size: 40px;
     color: #22b14c;
     font-family: "Papyrus";
  }
Поделиться
0

margin: 0 auto; не имеет смысла без указания ширины.

Поделиться
0

Поскольку это элемент блока, он будет распространяться на 100% по всей странице, попробуйте дать ему ширину

#Nav {
display:Block;
width:500px;
margin:0 auto;
font-size: 40px;
color: #22b14c;
font-family: "Papyrus";
}
Поделиться
  • 0
    спасибо, у меня это работает на Chrome, но он по-прежнему не будет делать стили для старых версий Internet Explorer
  • 1
    используйте display: block для более старых версий, так как nav - это элемент HTML5, для правильного отображения необходимо установить его как элемент уровня блока
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню