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

时间:2013-02-28 18:14:49

标签: html css

我正在尝试在其包含元素的底部对齐一些链接。我将vertical-align text-bottom添加到包含元素。我一无所获。

以下是主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;

 }

2 个答案:

答案 0 :(得分:0)

如果没有父母<li>,则<ul>无效。解决了这个问题。

此外,我只想添加几个简单的样式,让它“对齐”到底部,而不是混淆vertical-align,我相信cursed

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

http://jsfiddle.net/d3SFz/

答案 1 :(得分:-1)

正如其他人所说,将<li>项置于<ul>标记内。鉴于上面的CSS,您可以通过此更改将您的菜单项“居中”到您的CSS:

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


check it out here