Хорошо, поэтому я пытаюсь сделать строку различных текстовых бит в 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, хотя кажется, что он полностью обходит функцию выравнивания текста (поскольку все, что помещается здесь, будет игнорироваться). Есть что-то, что мне не хватает? Возможно, я просто недостаточно знаю о функции отображения.
Если вы хотите выровнять слова по горизонтали, вы должны использовать 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;
}
Попробуйте это, вы можете использовать элемент <ul>
вместо div, div лучше как обертка, если вам нужно обернуть navBar:
[http://jsfiddle.net/WT7qv][1]
border: 1px solid red;
или аналог вашего элемента.navBartext
. Блочные элементы (по умолчанию этоdiv
) растягиваются на ширину их контейнера. Встроенные элементы этого не делают. (Также имейте в виду, что имена классов CSS чувствительны к регистру, поэтому вы обнаружите, что в вашем примере ваш CSS для.navBartext
применяется только к вашему первому абзацу, так как он единственный с заглавной.navBartext
«B» в имя класса.)