0

我正在做一些响应式设计,并希望在浏览器小于 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>

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

谢谢,

保罗

4

2 回答 2

0

问题就在这里,在您的标准桌面 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;
}
于 2015-04-20T16:55:22.553 回答
0

为此,您可以删除

  • 的浮动:

    #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

  • 于 2015-04-20T16:56:52.770 回答