css - CSS - 集中 UL 以进行响应式设计

Question

我正在做一些响应式设计，并希望在浏览器小于 479px 时集中化 UL。这是我认为可行的方法，但事实并非如此......

@media (max-width: 479px) {
#services {
    background-color: #063;
    margin-top: 12px;
    width: 100%;
    text-align: center;
}

#services ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#services ul li {
    margin: 0 12px 12px 0;
    padding: 0;
}
}

这是标准桌面视图的 CSS：

#services {
height: 128px;
margin-top: 12px;
}

#services ul {
margin: 0;
padding: 0;
list-style: none;
}

#services ul li {
float: left;
margin: 0 12px 0 0;
padding: 0;
}

这是HTML：

<div id="services">
        <ul>
            <li><img src="/assets/images/cleaning.jpg" alt="" /></li>
            <li><img src="/assets/images/cleaning2.jpg" alt="" /></li>
            <li><img src="/assets/images/cleaning3.jpg" alt="" /></li>
        </ul>
</div>

如果有人能发现我在这里做错了什么，我将不胜感激。

谢谢，

保罗

Answer 1

问题就在这里，在您的标准桌面 css 中：

#services ul li {
 float: left;  //THIS IS THE PROBLEM
 margin: 0 12px 0 0;
 padding: 0;
}

提供，显示：内联而不是浮动：左。像这样，

#services ul li {
  display: inline; //SOLUTION
  margin: 0 12px 0 0;
  padding: 0;
}

Answer 2

为此，您可以删除

的浮动：

#services ul li {
display: inline-block;
margin: 0 12px 0 0;
padding: 0;
}

这也适用于桌面版本，或者只是在媒体查询中执行，然后在媒体查询中添加 margin-left: auto; 和 margin-right: auto 到 ul:

#services ul {
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

示例：http ://codepen.io/anon/pen/qdWLxb