我很难在容器的整个宽度上将3 li个元素居中。我正在响应式布局上工作,所以我不想在任何元素上使用固定宽度。这是我的代码http://jsfiddle.net/vzNbr/的小提琴

请注意,如果您扩展了与容器左侧对齐而不是居中对齐的输出屏幕。 CSS就是:

.container {
width: 70%;
margin: 0 auto;
}

#about {
background-color: #ebebeb;
height: 100%;
width: 100%;
}

#about ul.info {
display: block;
width: 100%;
margin: 0 auto;
list-style: none;
padding: 0;
}

#about ul.info li {
width: 20%;
float: left;
display: inline-block;
vertical-align: top;
margin: 1.5em;
font-size: .8em;
}


屏幕截图:

最佳答案

您需要取出float:left,将ul设置为display:table,将li设置为display:table-cell。这是您的演示:http://jsfiddle.net/vzNbr/1/

关于html - 在容器中居中ul,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/14898664/

10-16 19:04