CSS

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

CSS - 为响应式设计集中 UL

CSS - centralising UL for responsive design

responsive-design

responsiveness