1

テキストの下枠をヘッダーの下枠に揃える方法を見つけようとして非常に苦労しています。誰でもこれを行う方法を教えてもらえますか? それは大歓迎です。私は多くのことを試しました。

http://jsfiddle.net/Zevoxa/YeJc6/

HTML

<div id="header">
    <img id="logo" src="/img/logo.png"/>
    <div id="nav">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    </div>
</div>

CSS

/*-- HEADER --*/

#header {
 top:0px;
 width:100%;
 padding-top:20px;
 padding-bottom:0px;
 background-color:#2C2E31;
 border-bottom:#242426 solid 2px;
 text-align:center;
}

img#logo {
 margin-left:auto;
 margin-right:auto;
 margin-bottom:20px; 
}

#nav ul li {
 list-style-type:none;
 display:inline;
 margin-bottom:0px;
 padding-bottom:0px;
 padding-right:20px;
 font-size:20px;


}

#nav ul li a {
 color:#FAFAFA;
 text-decoration:none;
 border-bottom:#FAFAFA solid 2px;
}

/*-- CONTENT --*/

body {
 margin:0px;
 padding:0px;
 background-color:#2A2B2D;
}
4

3 に答える 3

0

#nav を #header の一番下に設定するかもしれません:

#nav
{
position:absolute;
bottom:0px;
height:20px;    //whatever height/size of text is needed
}

これは、#header にある #nav を #header の一番下に配置するように指示します。

于 2013-06-16T02:20:01.087 に答える
0

あなたの場合、ul の下マージンを削除するだけです。

#nav ul {
    margin-bottom: 0;
}
于 2013-06-16T02:27:10.477 に答える