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 回答