1

含まれている要素の下部にいくつかのリンクを配置しようとしています。包含要素に 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は機能しますが、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 に答える