我正在做一些响应式设计,希望 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>
如果有人能发现我在这里做错了什么,我将不胜感激。
谢谢,
保罗
最佳答案
问题出在这里,在您的标准桌面 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;
}
关于CSS - 为响应式设计集中 UL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29753277/