Почему функция отображения мешает выравниванию текста?

0

Хорошо, поэтому я пытаюсь сделать строку различных текстовых бит в html/css. Это будет предшественником навигационной панели. Мой HTML:

<div id="navBar">
<p class="navBartext">About</p>
<p class= "navbartext">News</p>
<p class= "navbartext">Contact Us</p>
<p class= "navbartext">Jobs</p>
</div>

и CSS:

.navBartext{
  text-align: center;
  color:black;
  font-size: 20;
  font-family: 'Poiret One', cursive;
  display: inline;
  padding-right: 20px;


}
 #navbar{
  width: 100%;
  height: 50px;


 }

Теперь, когда я беру "display: inline"; из текста текст выравнивается по вертикали, а не по горизонтали, а затем я могу использовать выравнивание текста, чтобы поместить его, но я хочу, чтобы все они были в одной строке. Когда я использую display-inline, хотя кажется, что он полностью обходит функцию выравнивания текста (поскольку все, что помещается здесь, будет игнорироваться). Есть что-то, что мне не хватает? Возможно, я просто недостаточно знаю о функции отображения.

  • 0
    То, что вам не хватает, это ширина. То, что происходит, станет более очевидным, если вы временно добавите border: 1px solid red; или аналог вашего элемента .navBartext . Блочные элементы (по умолчанию это div ) растягиваются на ширину их контейнера. Встроенные элементы этого не делают. (Также имейте в виду, что имена классов CSS чувствительны к регистру, поэтому вы обнаружите, что в вашем примере ваш CSS для .navBartext применяется только к вашему первому абзацу, так как он единственный с заглавной .navBartext «B» в имя класса.)
Теги:

2 ответа

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

Если вы хотите выровнять слова по горизонтали, вы должны использовать display:inline-block; так что элементы будут обрабатываться как текст. Всегда используйте встроенный блок для дочерних элементов и text-align:center; для родителя.

p{
color:black;
font-size: 20;
font-family: 'Poiret One', cursive;
display: inline-block;
padding-right: 20px;


}
#navbar{
width: 100%;
height: 50px;
text-align:center;


}

СМОТРЕТЬ ДЕМО

  • 0
    Да, это сделал трюк! Огромное спасибо.
  • 0
    Вы получили это человек! ;)
-2

Попробуйте это, вы можете использовать элемент <ul> вместо div, div лучше как обертка, если вам нужно обернуть navBar:

[http://jsfiddle.net/WT7qv][1]

http://jsfiddle.net/WT7qv

Ещё вопросы

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