HTML导航定位

Question

我的导航很简单。

三个div在一个标题(徽标，导航和电话)。

我想让他们的反应和可伸缩，每当用户放大。

示例

http://www.zendrive.com/

有人能给我一个简单的CSS例子来说明如何实现这个目标吗？

Answer 1

​

.header {
    display: table;
    position: relative;
    width:  100%;
    height: 60px;
}

.header > * {
    display: table-cell;
    position: relative;
    height: 100%;
}

.header .navigation ul {
    display: inline-block;
    position: relative;
    list-style: none;
    margin:  0;
    padding: 0;
}

.header .navigation li {
    display: inline-block;
}

<header class="header">
    <div class="logo">
        <img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png">
    </div>
    <nav class="navigation">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
        </ul>
    </nav>
    <div class="phone">555.555.5555</div>
</header>

​