html - 显示 :inline-block not working?

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

你有一堆 <br> HTML 中的标记。这会导致元素中断到下一行。摆脱它们。