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

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

您必须避免给予固定宽度以使元素响应。为了达到理想的结果，您可以按如下方式更改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执行相同的操作。