我的目标是制作一个导航/菜单栏,它具有居中的图像但缩小以适合其内容。我现在设计的方式,如果页面缩小,不适合的<li>
项最终会被推到下一行,使导航栏更高。所有li项和图像都应缩小以保持导航容器的高度达到其大小,并且只填充页面,而不是溢出。
此处示例:http://jsfiddle.net/t5P7y/
<div class="container">
<div class="nav-bar">
<ul class="nav-ul">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li><img src="../Logo.png"></li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
</div>
答案 0 :(得分:1)
试试这个:http://jsfiddle.net/t5P7y/6/
.nav-ul {
display: block;
padding: 0;
margin: 0;
}
.nav-bar {
display: block;
height: 100px;
background:red;
}
.nav-ul li {
display: inline-block;
float:left;
width:14.2%;
}
.nav-ul img {
height: auto;
width: 100%;
}
.container {
width: auto;
}
答案 1 :(得分:0)
除了这个是否真的是导航栏的好设计选择的基本问题,
我可以想到实现这一点而不引入javascript的唯一方法是使用每个<li>
的百分比宽度,假设列表中的项目数量不会改变
.nav-ul li {
float: left;
width: 14.28%;
}