Question

我的代码存在问题，我希望这些方框也排成一行并且看起来相同，但是当我在框中添加文字时会变得更大。我想要的是所有盒子的大小也相等。

我的问题是什么：

嗯，我相信，边缘有问题，但是在玩完数字之后我仍然无法弄清楚等等。任何想法为什么盒子的大小都不相等？

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;

您已将项目设为内嵌块。如果删除此样式，它们将是块（这是li元素的默认值），并占用完整的可用宽度。

Updated Fiddle

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

Answer 2

将inline-block的{{1}}更改为li（或将其删除，因为浏览器默认为block）

block

Answer 3

您必须将display属性设置为阻止

 ul.rig li { display: block; }

当文字变长时，为什么我的盒子会不断扩展？

3 个答案: