2013-02-28 84 views
1

我試圖讓一些鏈接對齊它們的包含元素的底部。我添加了vertical-align文本底部到包含元素。我什麼也沒得到。爲什麼列表項不會在包含元素的底部對齊?

這是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的工作,只是沒有align屬性)

@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; 

} 
+2

哪裏是'UL'? – dfsq 2013-02-28 18:17:49

+0

垂直對齊可以在內嵌或表格單元格中進行。 – cimmanon 2013-02-28 18:21:55

回答

-1

正如其他人所說,把你<li><ul>標籤內。鑑於上述,你的CSS可以 '中心' 的菜單項與此更改你的CSS:

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


check it out here

0

這不是有效的有<li>沒有<ul>父。修復。

此外,我只是添加了幾個簡單的樣式,讓它「對齊」到底部,而不是弄亂vertical-align,我相信這是cursed

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

http://jsfiddle.net/d3SFz/

+0

謝謝。但不是它不允許鏈接居中對齊? – msmis88 2013-02-28 18:26:54

+0

你能告訴我你的意思嗎? – 2013-02-28 18:34:54