1

我试图让一些链接在其包含元素的底部对齐。我在包含元素中添加了垂直对齐文本底部。我什么都得不到。

这是主 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;

 }
4

2 回答 2

0

<li>没有<ul>父母是无效的。修复它。

此外，我只会添加几个简单的样式以使其与底部“对齐”，而不是与vertical-align我认为被诅咒的 .

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

http://jsfiddle.net/d3SFz/

于 2013-02-28T18:19:38.383 回答
-1

正如其他人所说，将您的<li>物品放在<ul>标签内。鉴于上面的 css，您可以通过对 css 的更改来“居中”您的菜单项：

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


在这里查看

于 2013-02-28T19:20:04.383 回答