单元格设计网页居中水平对齐

Question

我有一个前段时间制作的网页，在编码时我没有考虑响应性，而使其响应性证明是一个问题。

当 window 处于原始宽度（当前设置为 min-width）时，页面如下所示：

当 window 介于 960px 和 1380px（我的最大宽度）之间时，我会在页面右侧看到一个奇怪的 mid-way 白色边框：

当 window 等于或大于 1380px 时，页面如下所示：

请注意，您可能需要打开图像位置才能看到白色 Whosebug 背景上的边框！

我尝试了很多方法，例如更改 margin-left margin-right 对齐的浮点数，以及更改交替单元格的浮点数，但我什么都做不了。我需要在页面 re-sized.

时单元格的间距相等

这是我的 css 当前列表项；

#server_features li{
    width:414px;
    height:200px;
    padding:10px;
    margin:10px;
    margin-top:20px;
    margin-bottom:20px;
    float:left;
    border-width:3px;
    border-style:solid;
}

如果您需要更多信息，请随时询问。

Answer 1

工作示例jsfiddle update example 第一：设置为 ul

overflow: hidden;

并删除

position absolute;

接下来删除您的最大和最小宽度并使用媒体查询在媒体查询中设置你的 ul 宽度 (margin-left + margin-right + bodrer-left + border-right + padding-left + padding-right + width) 在你的例子中，一列的宽度是 460px 2 列是 920px 3列为 1380px 等。我用了你的例子，我改变了我上面写的，所以你可以看到它是如何工作的。

单元格设计网页居中水平对齐

Cenetral Horizontal alignment of cell design webpage

css

center-align