display：inline-block不起作用？

Question

我正在本網站的首頁上工作，嘗試將標題下的div類別顯示在網格中，每行3 div。

我正在嘗試使用display:inline-block這樣做，但是我似乎無法使div水平顯示，而只能垂直顯示。 我也嘗試過使用float:left ，但是存在一個完全不同的問題。

我該怎么做才能以網格格式獲得這些股利？

以下是我的每個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; 並會解決問題。

這里是演示