0

この jsfiddle http://jsfiddle.net/buqhK/embedded/result/を見てください。その白いスペースはロゴで、右側は一番下に移動したいので、ロゴと同じ高さにします。そのテキストLorania。どうすればいいですか？

ここに私のHTMLがあります:

<div id="header">
    <div id="header-wrap">
        <div id="logo"></div>
        <div id="header-text">Lorania</div>
        <hr>
        <div id="menu">
            <ul>
                <li><a href="#" class="righter">aktualley</a>
                </li>
                <li><a href="#" class="righter">local thing</a>
                </li>
                <li><a href="#" class="righter">local club</a>
                </li>
                <li><a href="#" class="righter">local lore</a>
                </li>
                <li><a href="#" class="righter">contact</a>
                </li>
                <li><a href="#" class="righter2">photogaller</a>
                </li>
                <li><a href="#">contast</a>
                </li>
            </ul>
        </div>
    </div>
</div>

ここに私のCSSがあります

/* Main CSS*/
html, body{ 
    margin:0; 
    padding:0; 
    height:100%; 
    width:100%; 
    font-family: "Century Gothic", "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", Futura, sans-serif;
}

/* HEADER */
#header {
    background-color: black;
    background-position: center center;
    background-repeat: repeat-y;
    height: 172px;
    width: 100%;
    position: relative;
}
#header-wrap {
    text-align: center;
    margin: 0 auto;
    height: 140px;
    width: 800px;
    padding-top: 30px;
}
#logo {
    background-color: white;
    background-repeat: no-repeat;
    height: 80px;
    width: 330px;
    margin-bottom: 20px;
    float: left;
}
#header-text {
    color: #fff;
    font-size: 40px;
    float: right;
}
#header hr {
    clear: both;
    border: 0;
    height: 1px;
    background: transparent;
    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
    background-image:    -moz-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
    background-image:     -ms-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
    background-image:      -o-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
}
#menu ul { 
    margin: 0; 
    padding: 0; 
}
#menu li {
    display: block;
    float: left;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#menu a {
    color: white;
    text-decoration: none;
}
#menu a:hover {
    text-decoration: underline;
}
#menu a:active {
    text-decoration: underline;
    text-shadow: 0 0 2px white;
}
.righter {
    margin-right: 39px;
}
.righter2 {
    margin-right: 38px;
}

ありがとうございました！

4

2 に答える 2

2

これはどう？

#header-text {
color: #FFFFFF;
float: right;
font-size: 40px;
padding-top: 40px; }
于 2013-05-06T21:54:01.440 に答える
0

最近、同様の問題に直面しました。私がしたことは、ロゴとテキストを独自の div に入れることでした。外側の div にはdisplay:inline-block、画像が div を最小の高さまで拡張するためwidth:100%、親のすべての幅を占めるposition:relativeため、テキストをロゴと完全に揃えることができます。また、必要に応じて外側の div の「header-top」に追加できるロゴの下マージンも削除しました。

面倒なことはわかっていますが、自分でより良い方法を見つけたことがありません。とにかく、これは私が思いついたものです、それはあなたが望んでいたものですか？http://jsfiddle.net/buqhK/3/embedded/result/

于 2013-05-06T21:51:56.830 に答える