响应式设计导航菜单

Question

---

• 这是一种响应式设计。
• 徽标是此处唯一的固定宽度元素。其他元素的宽度取决于内容。
• 导航项不可数。所以没办法设置固定宽度。 （可能是 3 或 4 个菜单项）
• 搜索元素的宽度应该取决于其他元素。并尽力而为。
• 用户名可以很大，所以这里不能定义宽度。如果用户名较长，则元素的宽度较长。

尝试了几种方法： * 将外部 div 设为 display:table，其他所有元素设为 display:table-cell。 * 通过计算 jquery 窗口调整大小来定义搜索的宽度。但是当单击窗口调整大小按钮时，它的宽度不是应该的。

有人知道如何使用纯 CSS/CSS3 或如果不是 jquery 来实现此导航？

欣赏您的想法，帮助...

Answer 1

你去：http://jsfiddle.net/6jXcz/1/

水平缩放非常好，与导航项的数量无关。

说明：我使用“表格”CSS 规则并强制#search 具有100% 的宽度。为了防止徽标（或任何其他元素）被“压碎”，我在#menu 上使用了white-space: nowrap，在#logo 上使用了min-width。

<div id="table">
    <div id="menu">
        <div id="logo">LOGO</div>
        <ul id="navigation"><li>Item 1</li><li>Item 2</li></ul>
        <div id="search">
            <input type="text" name="search">
        </div>
        <div id="user">Username</div>
    </div>
</div>

还有 CSS：

#table {
    display: table;
    width: 100%;
}
#menu {
    background: grey;
    line-height: 50px;
    white-space: nowrap;
    display: table-row;
}
#menu > * {
    display: table-cell;
    text-align:center;
    height: 50px;
}
#logo {
    min-width: 200px;
    width: 200px;
}
#navigation {
    list-style-type: none;
    margin:0;
    padding:0;
}
#navigation li {
    display:inline-block;
    height: 50px;
    background: #999;
    padding: 0 5px;
}
#search {
    background: #aaa;
    width: 100%;
}
#search input {
    width: 98%;
    padding: 0;
    margin: 0;
    border: none;
    height: 92%;
}

Answer 2

添加到 S.B. 的答案，我会将 #search input CSS 更改为此，以防止调整 98% 宽度的问题（您可以看到搜索框右侧的填充在调整原始答案的大小时笨拙地增长):

固定版本：http://jsfiddle.net/6jXcz/2/

#search input {
    vertical-align: top;
    width: 100%;
    height: 46px;
    margin: 2px 0;
    padding: 0;
    border: none;    
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}