为div中的所有图像辩护，没有任何空间

Question

如何证明div内的所有图像，以便div的左侧和右侧没有任何空间。

这是我的HTML：

        <ul class="thumnails">
            <li class="img-thum">
                <img src="broward.jpg"/>
                <p class="thum-capt">How a Squad of Ex-Cops Fights Police Abuses</p>
            </li>

            <li class="img-thum">
                <img src="honey.jpg"/>
                <p class="thum-capt">The Men's Rights Movement and the Women Who Love It</p>
            </li>

            <li class="img-thum">
                <img src="bottles.jpg"/>
                <p class="thum-capt">Bottled Water Comes From the Most Drought-Ridden Places in the Country</p>
            </li>

            <li class="img-thum">
                <img src="snyder.jpg"/>
                <p class="thum-capt">6 Dumb Things Dan Snyder Has Said About the Name of His Football Team</p>
            </li>
        </ul>

这是我的CSS

如果我使用值设置padding-right，则右侧会有一个空格。

.thumnails {
width: 100%;
display: block;
float: left;
overflow: hidden;
padding: 0; 
margin: 12px auto;  
position: relative;
list-style: none;
}

.thumnails .img-thum {
width: 23%;
display: inline-block;
padding: 0; 
padding-right: 1.5%;
margin: 0 auto; 
}

.thumnails .img-thum img {
width: 100%;
padding: 0;
margin: 0;
}

.thumnails .img-thum .thum-capt {
width: 100%;
float: left;
overflow: hidden;
display: block;
position: relative;
padding: 0;
margin: 0;
font-weight: bold;
font-size: 14px;
font-family: serif;
}

---

---

My Fiddle

Answer 1

尝试阅读Ch​​ris Coyer的这篇文章：

http://css-tricks.com/equidistant-objects-with-css/

你的CSS应该是这样的：

.thumnails {
width: 100%;
display: block;
float: left;
overflow: hidden;
padding: 0; 
margin: 12px auto;  
position: relative;
list-style: none;

text-align: justify; /* <== add this */
}

.thumnails .img-thum {
width: 23%;
display: inline-block; 
padding: 0; 
margin: 0 auto; 
}


.thumnails .img-thum img {
display: inline-block; /* <== and this */

width: 100%;
padding: 0;
margin: 0;
}

.thumnails .img-thum .thum-capt {
width: 100%;
float: left;
overflow: hidden;
display: block;
position: relative;
padding: 0;
margin: 0;
font-weight: bold;
font-size: 14px;
font-family: serif;
}


/*and this*/
.thumnails:after {
  content: '';
  width: 100%; /* Ensures there are at least 2 lines of text, so justification works */
  display: inline-block;
}

请参阅此demo

Answer 2

尝试这样： Demo

只需更新此css即可解决此问题。

CSS：

.thumnails .img-thum {
    width: 23%;
    display: inline-block;
    padding: 0;     
    margin: 0;  
    float:left;
}

更新了小提琴 Link

图片之间的空格： Link 。希望你需要这样

Answer 3

解决了您的问题＆gt;＆gt; Images Without Space and justified in middle

全屏测试＆gt;＆gt; FullScreen Fiddle

修改后的CSS

---

.thumnails {
    width: 100%;
    display: block;
    float: left;
    overflow: hidden;
    padding: 0;
    margin:1%;
    position: relative;
    list-style: none;
    white-space:no-wrap;
}
.thumnails .img-thum {
    width: 22.5%;
    display: inline-block;
    padding: 1%;
    margin: 0 auto;
}
.thumnails .img-thum img {
    width: 100%;
    padding: 0;
    margin: 0;
}
.thumnails .img-thum .thum-capt {
    width: 100%;
    float: left;
    overflow: hidden;
    display: block;
    position: relative;
    padding: 0;
    margin: 0;
    font-weight: bold;
    font-size: 14px;
    font-family: serif;
}

Answer 4

为了确保正确调整大小，使用box-sizing:border-box几乎总是值得的，因此在宽度计算中填充和边框包含。

然后是两个简单的方法（基于你当前的代码），虽然还有其他选择。

JSfiddle (Inline-block)

Jsfiddle (Floats)

CSS re Inline Block

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

.thumnails {
    width: 100%;
    display: block;
    float: left;
    overflow: hidden;
    padding: 0; 
    margin: 12px auto;  
    position: relative;
    list-style: none;
    background:black;
    font-size:0; /* required to remove white space */
}

.thumnails .img-thum {
    width: 25%;
    display: inline-block; /* change to float:left for float version */
    padding: 0; 
    margin: 0 auto; 
}

.thumnails .img-thum img {
    width: 100%;
    padding: 0;
    margin: 0;
}

.thumnails .img-thum .thum-capt {
    width: 100%;
    float: left;
    overflow: hidden;
    display: block;
    position: relative;
    padding: 0;
    margin: 0;
    font-weight: bold;
    font-size: 14px;
    font-family: serif;

}