如何制作响应式<ul>？答案

【问题标题】：How to make responsive <ul>?如何制作响应式<ul>？
【发布时间】：2015-04-23 14:07:44
【问题描述】：

我正在尝试制作一个包含图像而不是文本的菜单。当浏览器窗口缩小时，这 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%;
}

【问题讨论】：

标签： css responsive-design html-lists

【解决方案1】：

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

试试这个另外，看看前面的问题link1 link2

【讨论】：

感谢您的回复，但这并没有什么不同。这两个链接也无助于消除与我的具体情况相关的任何混淆，因为它们使用背景图像和正文进行处理。