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>

HTML导航定位

1 个答案: