Question

我正在尝试创建一个包含图像而不是文本的菜单。当浏览器窗口缩小时，9个菜单项会断行。我希望它们保持水平排列，并保持在我的包装纸内缩小尺寸。

这就是我所拥有的：

<div class="wrapper">
    <div class="nav" role="navigation">
            <ul>
                <li><img src="http://www.ksl.dev/wp-content/themes/ksl/img/ksl_news.png" alt="Logo" class="logo-img"/></li>
                <li><img src="http://www.ksl.dev/wp-content/themes/ksl/img/ksl_news.png" alt="Logo" class="logo-img"/></li>
                <li><img src="http://www.ksl.dev/wp-content/themes/ksl/img/ksl_news.png" alt="Logo" class="logo-img"/></li>
                <li><img src="http://www.ksl.dev/wp-content/themes/ksl/img/ksl_news.png" alt="Logo" class="logo-img"/></li>
                <li><img src="http://www.ksl.dev/wp-content/themes/ksl/img/ksl_news.png" alt="Logo" class="logo-img"/></li>
                <li><img src="http://www.ksl.dev/wp-content/themes/ksl/img/ksl_news.png" alt="Logo" class="logo-img"/></li>
                <li><img src="http://www.ksl.dev/wp-content/themes/ksl/img/ksl_news.png" alt="Logo" class="logo-img"/></li>
                <li><img src="http://www.ksl.dev/wp-content/themes/ksl/img/ksl_news.png" alt="Logo" class="logo-img"/></li>
                <li><img src="http://www.ksl.dev/wp-content/themes/ksl/img/ksl_news.png" alt="Logo" class="logo-img"/></li>
            </ul>
    </div>
</div>

.nav {
    float:left;
    display:none;
}
/* I have a logo I'll be floating next to the nav */
.nav ul {
    float:left;
    width:100%;
    height:100%;
}
.nav ul li img {
    display: block;
    height: auto;
    max-width: 100%;
}

Answer 1

img {
max-width: 100%;
height: auto;
width: auto; }

试试这个另外，请查看以前的问题link1 link2

如何做出响应<ul>？</ul>

1 个答案: