为什么列表项不会在包含元素的底部对齐？

我试图让一些链接对齐它们的包含元素的底部。我添加了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; 

}

来源

2013-02-28 msmis88

哪里是'UL'？ – dfsq 2013-02-28 18:17:49

垂直对齐可以在内嵌或表格单元格中进行。 – 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

来源

2013-02-28 19:20:04 JoelH

这不是有效的有<li>没有<ul>父。修复。

此外，我只是添加了几个简单的样式，让它“对齐”到底部，而不是弄乱vertical-align，我相信这是cursed。

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

http://jsfiddle.net/d3SFz/

来源

2013-02-28 18:19:38

谢谢。但不是它不允许链接居中对齐？ – msmis88 2013-02-28 18:26:54

你能告诉我你的意思吗？ – 2013-02-28 18:34:54

为什么列表项不会在包含元素的底部对齐？

回答

相关问题