html - 对齐 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 为 value，那么右边会有一个空格。

.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

尝试阅读 Chris 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