Почему элементы списка не совпадают внизу элемента?

Question

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

Это содержимое основного файла html.

<div class="mainHeader"> 

<li><a class="mainHeaderLink" href="book.html">BOOK A ROOM</a></li> 
<li><a class="mainHeaderLink" href="promotions.html">PROMOTIONS</a></li> 
<li><a class="mainHeaderLink" href="meetings.html">MEETINGS & EVENTS</a></li> 
<li><a class="mainHeaderLink" href="about.html">ABOUT STIL</a></li> 

</div> 

Вот мой файл css. (CSS-код работает, просто не выравнивать свойство)

@charset "UTF-8"; 
/* CSS Document */ 


body 
{ 
margin-left: 0px; 
margin-top: 0px; 
margin-right: 0px; 
margin-bottom: 0px; 
} 


div.mainHeader 
{ 
background-color: #006; 
background: solid; 
height:100px; 
text-align: center; 
vertical-align: text-bottom; 
} 


a.mainHeaderLink:link 
{ 
text-decoration: none; 
font-weight: bold; 
color: #FFF; 
font-size: 16px; 
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
} 

a.mainHeaderLink:visited 
{ 
text-decoration: none; 
font-weight: bold; 
color: #FFF; 
font-size: 16px; 
} 

a.mainHeaderLink: active 
{ 
text-decoration: none; 
font-weight: bold; 
color: #CCC; 
font-size: 16px; 
} 

a.mainHeaderLink:hover 
{ 
text-decoration: none; 
font-weight: bold; 
color: #CCC; 
font-size: 16px; 
} 

li 
{ 
display:inline; 
margin-left: 50px; 

} 

Answer 1

Как уже говорили другие, положить <li> элементы внутри <ul> тега. Учитывая CSS выше, вы можете 'центр' ваши пункты меню с этим изменения в вашем CSS:

li 
{ 
    display:inline-block; 
    margin-left: 50px; 
    margin-top:37px; 
} 

check it out here

Answer 2

Это не действует, чтобы <li> без <ul> родителя. Исправьте это.

Кроме того, я бы просто добавил несколько простых стилей, чтобы заставить его «выровнять» на дно, а не беспорядок вокруг с vertical-align, который я считаю cursed.

.mainHeader { 
    position: relative; 
} 
.mainHeader ul { 
    position: absolute; 
    bottom: 0; 
} 

http://jsfiddle.net/d3SFz/