html - 无序列表对齐 - 产品并排

Question

我已经无计可施了。在这里查看了其他已回答的问题，但似乎无法获得有效的答案。

我的 fiddle :(Exp:resso store code 留在里面只是为了表明这就是我正在使用的。)

https://jsfiddle.net/4gk5qszm/

HTML:

<div class="StoreContent-Index">
{exp:store:search orderby="date" sort="desc"}
{exp:store:product entry_id="{entry_id}"}

<ul class="StoreContent-ProductIndexList">
<li>
<a href="{url_title_path='store/product'}">
<img src="{product_image}" class="TCBProductImgCat">
<h4>{title}</h4>
<p>{regular_price}</p>
</a>
</li>
</ul>

{/exp:store:product}
{/exp:store:search}
</div>

CSS:

ul.StoreContent-ProductIndexList{
  display: inline-block;
  *display: inline;
  zoom: 1;
  float: left;
}

ul.StoreContent-ProductIndexList li {
width: 200px;
display: inline-block;
vertical-align: top;
*display: inline;
*zoom: 1;
}

.StoreContent-Index{
background: #FFF;
width: 100%;
}

.StoreContent-ProductIndexList:after { 
clear: both;
}

直播的样子:

http://www.thymecher.com/0316-S

我已经尝试过网格对齐、 float 和所有内联的东西——nada。我只想让危险的东西在 fiddle 中显示的列表样式中并排正确对齐。 (图像、下方的标题、下方的价格 - 水平重复，而不是垂直重复，每行有 8 个产品。)

非常感谢任何帮助。谢谢!

Answer 1

因此，正如 Andrew 指出的那样，您的示例代码与您网站上发生的情况并不完全匹配。在 .StoreContent-Index div 中，您的每个产品都包装在一个 form 元素中，其中包含一个 div 和一个 ul，后者包含实际的产品信息。

form 元素作为 block 级元素的组合以及许多基本 HTML 元素在您的样式表中应用了默认的 clearfix (What is clearfix?) 的事实在这里确实对您不利。我在 CodePen 上有一个最小的工作示例您可以查看，但假设您可以对所有样式表进行更改，那么您要进行的主要更改将在 http://www.thymecher.com/?css=0316-Styles/store-main.v.1458927906 中进行。

在该样式表中，您可以删除以下代码:

ul.StoreContent-ProductIndexList{
  display: inline-block;
  *display: inline;
  zoom: 1;
  float: left;
}

ul.StoreContent-ProductIndexList li {
width: 200px;
display: inline-block;
vertical-align: top;
*display: inline;
*zoom: 1;
}

并将其替换为:

ul.StoreContent-ProductIndexList, ul.StoreContent-ProductIndexList > li {
  list-style:none;
}
.store_product_form {
  display:inline-block;
  vertical-align:top;
  width: 200px;
}

这应该会为您提供所需的布局。