CSS - 为响应式设计集中 UL

Question

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

@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;
}
}

这是标准桌面 View 的 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;
}

提供，显示:内联而不是 float :左。像这样，

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