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

为此，你可以删除

的float：

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

这也可以用于桌面版本，或者只是在媒体查询中进行，然后在媒体查询中添加margin-left：auto;和margin-right：自动到ul：

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

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

CSS - 集中UL用于响应式设计

2 个答案: