0

我的目标是生成一个导航/菜单栏,它具有居中的图像,但会缩小以适应其内容。我现在设计的方式,如果页面缩小,<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>
4

2 回答 2

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;
}
于 2013-10-20T20:48:19.493 回答
0

除了这是否真的是导航栏的一个很好的设计选择的基本问题之外,我认为在不引入 javascript 的情况下实现这一目标的唯一方法是为每个使用百分比宽度<li>,假设列表中的项目数不会改变

.nav-ul li {
    float: left;
    width: 14.28%;
}
于 2013-10-20T20:47:26.900 回答