Question

我希望在相同的高度上有一个标题（在左侧）和一个垂直导航（在右侧），在边框下方约10-20px，表示这两个元素下面的一行。

我现在尝试了一个多小时，然而却没有成功。

<header>
    <h1>Headline on the left</h1>
    <nav>
        <ul>
            <li><a href="#">Navigation</a></li>
            <li><a href="#">On The</a></li>
            <li><a href="#">Right</a></li>
        </ul>
    </nav>
    <div id="clearfix"></div>
</header>

CSS：

header {
    border-bottom: 1px solid red;
}

header h1 {
    float: left;
}

header nav {
    float: right;
}

#clearfix {
    clear: both;
}

/* Nav. Style */

header nav > ul li {
    display: inline;
    list-style: none;
}

我希望有人可以帮助我。

Answer 1

继承你的回答http://jsfiddle.net/j72p9/1/

HTML：

   <div style="display: table; height: 100px; overflow: hidden;background:yellow;">
   <div style="display: table-cell; vertical-align: middle;">
   <div>
     everything is vertically centered in modern IE8+ and others.
   </div>
   </div>
   <div style="display: table-cell; vertical-align: middle;">
   <div>
     everything is vertically centered in modern IE8+ and others.
   </div>
   </div>
   </div>

Answer 2

我的提议如下:(查看http://jsfiddle.net/j72p9/）

header {
    border-bottom: 1px solid red;
}

header h1 {
    float: left;
    border: 1px solid red;
    margin:0
}

header nav {
    float: right;
}

#clearfix {
    clear: both;
}

header nav {
    border: 1px solid blue;
}

/* Nav. Style */
header nav > ul {
    vertical-align:middle;
    margin: 0;
}

header nav > ul li {
    display: inline;
    list-style: none;
}

然后你需要使用一些jQuery：

jQuery('header nav').css('line-height', jQuery('header h1').height() + 'px')

Answer 3

如果我了解您的要求，

display: table和100％宽度是一个不错的选择。

Have a fiddle!

HTML

<header>
    <h1>
        Headline on the left
    </h1>
    <nav>
        <a href="#">Navigation</a> <a href="#">On The</a> <a href="#">Right</a>
    </nav>
</header>

CSS

* {
    margin: 0;
    padding: 0;
}
header {
    border-bottom: 1px solid red;
    display: table;
    width: 100%;
}
header h1 {
    display:table-cell;
    padding: 10px;
    vertical-align: middle;
}
header nav {
    display:table-cell;
    text-align: right;
    padding: 10px;
    vertical-align: middle;
}
header nav a {
    margin: 0 10px;
    white-space: nowrap;
}

边境+标题+导航 - 定位问题

3 个答案: