css ul 在新行中的位置

Question

我需要

此时代码看

CSS

ul#content {height:1%;overflow:hidden;list-style:none;margin:0;padding:0;max-width: 1020px;}
    ul#content li{vertical-align:top;display:inline-block;margin:0 2% 26px 0;width:auto;}


    * html ul#content li{display:inline;}
    *+ html ul#content li{display:inline;}

HTML

<ul id="content" >
                <li>
                    <div style="height: 420px;width: 740px;" ></div>
                </li>
                <li>

                    <ul>
                        <li>
                            <div style="min-width: 220px;">
                                text
                            </div>
                        </li>
                        <li>
                            <div style="min-width: 220px;">
                                text
                            </div>
                        </li>
                        <li>
                            <div style="min-width: 220px;">
                              text
                            </div>
                        </li>
                    </ul>

                </li>
            </ul>

Answer 1

也许 css 媒体查询是您想要查看的东西:

http://css-tricks.com/6731-css-media-queries/

此特定教程解释了如何根据屏幕宽度更改布局/样式。

基本上它允许有条件地在元素上设置样式，在这种情况下，您可以根据屏幕宽度为 ul 制作单独的样式。浏览器支持相当不错，作为后备，您可以提供一些非常简单的 js 代码来处理不支持的浏览器。