Question

我正在使用此website的主页，并尝试将标题下的类别div显示在网格中，每行3个div。

我正在尝试使用display:inline-block这样做，但我似乎无法将div显示为水平显示，只是垂直显示。我也尝试过使用float:left，但问题完全不同。

如何以网格格式获取这些div？

以下是每个div的html：

<br /><a href="URL"><div class="home_cat" style="background-image:url('IMAGEURL');">
<p class="home_cat_link">Category Name</p></div></a>

以下是我的css：

.home_cat {
background:#14A1C4;
height:180px;
width:29%;
display:inline-block;
margin:5px;
padding:5px;
}

.home_cat_link {

font-size:3em;
font-family: 'Permanent Marker', cursive;
color:#000;
padding-top:80px;
text-align:center;
}

提前感谢您的帮助！

Answer 1

HTML中有一堆<br>个标签。这会导致元素突破到下一行。摆脱它们。

Answer 2

display: inline-block;正在运作。但您可以添加padding: 0;和margin: 0;并解决问题。

<强> HERE IS DEMO

显示：内联块不工作？

2 个答案: