ul和li的响应式布局 - 窗口宽度CSS

Question

您好我正在尝试与li建立一个响应式网站，但实际上很难实现。我想要做的是leftContainer和rightContainer中的每一个都有多个li盒子，连续最多3个盒子。当我减小窗口宽度的大小时，我希望它们每行变成2个盒子，当我减少更多时，例如，

if($(window).width() <= 700) {
    // 1 li box each for both leftContainer and rightContainer }

像这样的东西。以下是我写的代码

http://codepen.io/hk0424/pen/womQxq

Answer 1

如果要使元素响应，请避免使用固定宽度。

您必须避免给予固定宽度以使元素响应。为了达到理想的结果，您可以按如下方式更改li的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中的max-width替换为max-width：100％。对于内联元素，您不必编写margin: 0 auto以将其对齐在中心，因为父元素上的text-align: center执行相同的操作。