Question

我正在尝试在其包含元素的底部对齐一些链接。我将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;

 }

Answer 1

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

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

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

http://jsfiddle.net/d3SFz/

Answer 2

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

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

check it out here

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

2 个答案: