Question

在我的智慧结束时。在这里看过其他已回答的问题，似乎无法得到工作的答案。

我的小提琴:( Exp：resso商店代码只是为了表明我正在使用它。）

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

我已经尝试过网格对齐，浮动，所有内联的东西 - 虚无...我只是希望这些危险的东西在小提琴中显示的列表样式中正确排列。（图片，标题下面，价格在下面 - 水平重复，而不是垂直，例如 - 每行8个产品。）

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

Answer 1

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

form元素是块级元素的组合，以及许多基本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;
}

这应该为您提供您正在寻找的布局。

Answer 2

小提琴无法正确渲染。

我认为您的CSS命名约定无效

ul.StoreContent-ProductIndexList li

您应该只使用StoreContent-ProductIndexList类;或

.StoreContent-ProductIndexList li

我会研究FlexBox。它确实有助于对齐（某人的CodePen示例：http://codepen.io/HugoGiraudel/pen/LklCv） .StoreContent-ProductIndexList { 显示：flex; 辩解内容：空间; }

你可能想要给你的＆＃34; li＆＃34;排名班级名称

.liClasses {
  margin: as needed;
  others: as needed;
}

无序列表对齐 - 产品并排

2 个答案: