html - 当我的文本变长时，为什么我的框会不断扩大？

Question

我的代码有问题，我希望所有的框都排成一行并且看起来相等，但是当我在框中添加文本时，它们会变大。我想要的是所有盒子的大小都相等。

这是我的代码:http://jsfiddle.net/9p40xeLe/1/

我的问题是什么:

好吧，我相信边距有问题，但是在玩弄数字等之后我仍然无法弄清楚。知道为什么盒子的大小不相等吗？

CSS:

ul.rig {
list-style: none;
font-size: 0px;
margin-left: -2.5%; /* should match li left margin */
}
ul.rig li {
display: inline-block;
padding: 10px;
margin: 0 0 2.5% 2.5%;
background: #fff;
border: 1px solid #ddd;
font-size: 16px;
font-size: 1rem;
vertical-align: top;
box-shadow: 0 0 5px #ddd;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
ul.rig li img {
max-width: 100%;
height: auto;
margin: 0 0 10px;
}
ul.rig li h3 {
margin: 0 0 5px;
}
ul.rig li p {
font-size: .9em;
line-height: 1.5em;
color: #999;
}
/* class for 2 columns */
ul.rig.columns-2 li {
width: 47.5%; /* this value + 2.5 should = 50% */
}
/* class for 3 columns */
ul.rig.columns-3 li {
width: 30.83%; /* this value + 2.5 should = 33% */
}
/* class for 4 columns */
ul.rig.columns-4 li {
width: 22.5%; /* this value + 2.5 should = 25% */
}

@media (max-width: 480px) {
ul.grid-nav li {
    display: block;
    margin: 0 0 5px;
}
ul.grid-nav li a {
    display: block;
}
ul.rig {
    margin-left: 0;
}
ul.rig li {
    width: 100% !important; /* over-ride all li styles */
    margin: 0 0 20px;
}
}

HTML:

    <ul class="rig">
    <li>
    <img src="images/pri_001.jpg" />
    <h3>Espresso</h3>
    <center>
    <p>Espresso is an entire approach to coffee cuisine.<br>
    It is a unique dark roast, finely ground brewing method that produces an              intense coffee experience.  <br>
    This distinctive espresso blend of Indonesian & South America coffees    are roasted in a unique Mediterranean style.
    </p></center>
</li>

<li>
    <img src="images/pri_002.jpg" />
    <h3>Espresso Decaf</h3>
    <center>
    <p>A Mediterranean style Espresso blend of African & South American      coffees. <br>
    It has all the taste & body of Espresso w/ none of the jitters.
    </p>
    <center>
</li>

<li>
    <img src="images/pri_003.jpg" />
    <h3>Italian Roast</h3>
    <p>Our darkest roast, w/ beans that are ebony black. <br>
    This roast offers a big coffee flavor for people who like a strong coffee taste from each sip. <br>
    From the moment you open the bag you will notice an incredible, mouth watering aroma.<br></p>
</li>

<li>
    <img src="images/pri_004.jpg" />
    <h3>French Roast</h3>
    <p>French is our medium dark roast, w/ a dark mahogany color. <br>
    A blend of sumatran mandeling, panamanian, mexican, & colombian coffees. <br>
    This is the coffee for the true connoisseur.<br></p>
</li>

<li>
    <img src="images/pri_004.jpg" />
    <h3>Europa Blend</h3>
    <p>An extravagant, full-bodied blend w/ a rich fragrant aroma. <br>
    This medium dark roast coffee will excite your senses. <br></p>
</li>

<li>
    <img src="images/pri_004.jpg" />
    <h3>Vienna Roast</h3>
    <p>A medium roast lighter than French or Italian. <br>
    This blend of Colombian Supremo, Panama & Brazilian coffee is characterized by caramel undertones w/ a clean aftertaste. <br>
    This is the perfect roast for the coffee drinker who likes a full coffee flavor without being overpowered.<br></p>
</li>

<li>
    <img src="images/pri_004.jpg" />
    <h3>Fogbuster</h3>
    <p>A blend of Italian & Vienna roasts. A rich sweet flavored coffee w/ a beautiful bouquet. <br> 
    It retains it character even when sweetened w/ milk.<br></p>
</li>

<li>
    <img src="images/pri_004.jpg" />
    <h3>Gourment Blend</h3>
    <p>This is the blend that started it all & is still our most popular. <br>
    A blend of the finest Colombian, Central American & South American Coffees, <br>
    lightly roasted to enhance their natural nut & cocoa profiles.<br> </p>
</li>

<li>
    <img src="images/pri_004.jpg" />
    <h3>Premium Blend</h3>
    <p>A mellow, mild & light bodies coffee. 
    This blend of flavorful Arabica beans is great for any time of the day. </p>
</li>

<li>
    <img src="images/pri_004.jpg" />
    <h3>Colombian</h3>
    <p>Grown in the coffee capitol of the world,<br>
    these flavorful beans are lightly roasted to perfection to insure a great cup of coffee every time.<br></p>
</li>

<li>
    <img src="images/pri_004.jpg" />
    <h3>Colombian</h3>
    <p>Deliciously dark Italian roast w/ lots of flavor, & a smooth sweet aftertaste.<br>
    A coffee house favorite. <br></p>
</li>

<li>
    <img src="images/pri_004.jpg" />
    <h3>Costa Rican</h3>
    <p>Lightly roasted beans grown on the Kona coast of Hawaii are blended w/ select arabicas to produce a smooth, <br>
    mild coffee taste. <br></p>
</li>






</li>

</ul>

    </div>

Answer 1

这是原因:

ul.rig li {
  display: inline-block;

您已将元素制作成内联 block 。如果删除此样式，它们将成为 block (这是 li 元素的默认设置)，并占据全部可用宽度。

Updated Fiddle

顺便说一下，我看到你也使用了 center 标签。这个标签是旧的，通常被认为是不好的做法(样式应该在标记中完成，而不是在标记中完成)，并且在 HTML5 中这个元素被正式删除。在您的 CSS 中使用 text-align: center 使文本居中。