避免固定宽度的代码。
您必须避免给定固定宽度以使元素响应。为了实现你想要的结果,您可以按如下改变里的CSS:
html {
text-align: center;
}
#container {
display: inline-block;
max-width: 100%;
text-align: center;
}
#leftContainer{
list-style: none;
float:left;
left:0px;
text-align: center;
margin: 0px auto;
padding: 0px;
display: inline-block;
width: 50%;
overflow: hidden;
}
#rightContainer {
float: right;
list-style: none;
margin: 0px auto;
padding: 0px;
text-align: center;
display: inline-block;
width: 50%;
overflow: hidden;
right:0px;
}
#leftContainer li, #rightContainer li{
margin: 0px;
padding: 0px;
display: inline-block;
list-style: none;
}
.leftbox, .rightbox{
background-color: grey;
width: 185px;
height: 150px;
margin: 5px;
}
正如你可以看到我已经取代了在#container的最大宽度为最大宽度:100%。而对于内联元素,您不必编写margin: 0 auto来将它排列在中间,因为父元素上的text-align: center完全相同。