Question

我正在创建一个图像网格，其中有一个滑块可以改变图像本身的大小。

我的问题是，用红色表示的竞争者的宽度不足以填充行而不留空区域（如样本中）。

我想要实现的是适合li元素，以绿色表示，以便它适合整行，直到滑块移动并且图像变大或变小。简而言之，我希望整个原料都充满了绿色。

这是我的css：

ul {
    width:410px;
    background-color:red;
    height:100%;
    display:table;
    padding:0;
}
li {
    list-style-type: none;
    float: left;
    margin:5px;
    padding: 5px;
    background-color:green;
}
.image {
    width: 100px;
    height: 75px;
    display: block;
    background-color: blue;
}

我可以用这样的javascript来解决这个问题，但是没有冷却器/ CSS方式吗？

var ul_width = $('ul').width();
var li_width = $('li').first().outerWidth()+2;
var modulo = Math.floor(ul_width/li_width)

var padding = (ul_width-(li_width*modulo))/modulo/2
$('li').css('padding',padding);

Answer 1

将li的宽度设置为33.3333％，然后移除margin。

从display:table;移除ul。

使用border-box来避免使用填充进行恼人的数学运算。

* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

http://jsfiddle.net/9Tce5/4/

Answer 2

您可以设置边距和填充，但也可以设置宽度和margin：auto to childs元素： DEMO

ul {
    width:410px;
    background-color:red;
    height:100%;
    display:table;
    padding:0;
}
li {
    list-style-type: none;
    float: left;
    margin:5px 0.8%;
    padding: 4% 0.8%;
    background-color:green;
    width:30%;
}
.image, .title {
    width: 100px;
    margin:auto;
    display: block;
}
.image {
    height: 75px;
    background-color: blue;
}

完全隐藏红色background：重置margin和li width。的 DEMO

li { list-style-type: none; float: left; margin:0; padding: 4% 1%; background-color:green; width:31.3%; }

具有自动填充的图像网格

2 个答案: