我正在做一些响应式设计,并希望在浏览器小于 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>
如果有人能发现我在这里做错了什么,我将不胜感激。
谢谢,
保罗