display：inline-block not working？

我正在研究这个website的主页，并试图获取标题下的类别div以显示在网格中，每行3个div。display：inline-block not working？

我试图这样做使用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; 
}

提前任何帮助谢谢！

来源

2014-12-07 user994585

你必须每个格间休息。你不能这样做，如果你想他们显示内联... – mawburn 2014-12-07 21:27:44

你在你的HTML中有一堆<br>标签。这会导致元素分解到下一行。摆脱他们。

来源

2014-12-07 21:27:43 aug

哈哈哇...旧的HTML我忘了删除。欣赏它！ – user994585 2014-12-07 21:35:24

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

HERE IS DEMO

来源

2014-12-07 21:30:29 Karmacoma

display：inline-block not working？

回答

相关问题