响应设计导航菜单
响应设计导航菜单
提问于 2014-03-26 00:09:58
- 这是一个响应性的设计。
- 徽标是这里唯一的固定宽度元素。其他元素的宽度应取决于硫层含量。
- 导航项是不可数的。所以没有办法设置一个固定宽度。(可能是3或4个菜单项)
- 搜索元素的宽度应取决于其他元素。尽可能多地飞奔。
- 用户名可以是非常，所以不能在这里定义宽度。如果用户名较长，则元素的宽度更长。
尝试了几种方法：*使外部div作为显示:table和所有其他元素作为display: table -cell。*通过调整jquery窗口大小来计算搜索的宽度。但是，当单击“窗口调整大小”按钮时，它的宽度并不是它应该的宽度。
任何人都知道如何使用纯CSS/ CSS3或者如果不是jquery ?来实现这个导航。
感谢你的想法，帮助..。
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-03-26 00:36:05
给你：http://jsfiddle.net/6jXcz/1/
鳞片完全精细的水平和独立于导航项目的数量。
解释：我使用了“表”CSS规则，并强制#search具有100%的宽度。为了防止徽标(或任何其他元素)被“压碎”，我在#menu上使用了#menu，在#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%;
}Stack Overflow用户
发布于 2014-03-26 00:52:10
添加到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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22648943
复制相关文章
相似问题
腾讯云开发者
