Question

我有这个css将图标作为列表项并将它们放在一个无序列表中，我希望能够在更改屏幕大小时使列表项居中。

ul {
  list-style-type: none;
  overflow: hidden;
  height: 120px;
  padding-left: 100px;
  padding-right: 100px;
}
li{
  float: left;
  width: 100px;
  height: 80px;
  padding: 10px;
  border: 1px solid gray;
  margin: 10px;
  text-align: center;
}

目前我的代码如下所示：http://jsfiddle.net/x2SR6/

目前我更改屏幕尺寸时右侧有很多空白区域我该如何修复

Answer 1

您需要做的是使用text-align:center上的ul和li上的display:inline-block。这将帮助您入门，您还需要{ul。

上的height:auto

这是来自更新小提琴的CSS。

ul {
    list-style-type: none;
    overflow: hidden;
    height: auto;
    padding-left: 120px;
    padding-right: 120px;
    text-align:center;
}
li{
    display:inline-block;
    width: 100px;
    height: 80px;
    padding: 10px;
    border: 1px solid gray;
    margin: 10px;
    text-align: center;
}

您还需要包裹ul，以便箭头显示在顶部，这是留给读者的练习。

如何将浮点列表元素置于无序列表中

1 个答案: