css - 垂直和水平响应列表

Question

我想问你如何制作一个包含 3 个元素的响应列表，当我减小浏览器的大小时，元素会垂直并且一个在另一个下方，当浏览器窗口增长时，元素将是在一个。我的列表代码如下，我设法将它们排在中间并排成一排，但我对响应感到困惑..

<div class="list">
<ul id="2" class="3">
<li><a href="#">< </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
</ul>
</div>

和CSS

.list{
    position: relative;
    width: 100%;
    display: block;
}

.list li {
    width: 33.3%; /* nice 3 columns */
    float: left;
    padding: 0; /* should have zero paddng/margin */
    margin: 0;
}

.list li > span {
 margin: 6% 6% 0 0; /* now margins are specified relative to outer <li> width */
 display: block;
}

Answer 1

您正在寻找的是 css 媒体查询。例如，将此添加到您的 css:

@media (max-width:500px){
    .list li {
        float:none;
   }
}

这是一个 jsfiddle .

建议您阅读以下内容:

https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries?hl=en https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries http://cssmediaqueries.com/what-are-css-media-queries.html