無序列表對齊 - 產品並排

在我的智慧結束。看過這裏的其他回答的問題，似乎無法得到工作的答案。無序列表對齊 - 產品並排

我的小提琴：（預期：左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個產品。）

任何幫助，非常感謝。謝謝！

來源

2016-03-25 C.A

您的實時網站與您發佈的代碼看起來相當不同。 'ul's被包裹在'form's中。爲了工作，你可以添加'display：inline-block; vertical-align：top'到'.store_product_form'。至於你的小提琴，我沒有觀察到任何東西_不是內聯（見https://jsfiddle.net/4gk5qszm/1/）。你能發佈你的呈現的HTML（而不是表達式模板）嗎？ –

正如@AndrewMyers所指出的那樣，您網站上的代碼實際上並不符合您發佈的內容，而且您網站上的標記在語義上非常古怪。由於這是一個基於WP的商店，我假設你不能控制很多這種標記，比如每個表單元素或'.StoreContent-ProductIndexList'列表中隱藏的輸入。我現在正在修復一個修補程序，但是如果您有能力更改某些標記，那麼事情會變得更簡單/更容易。 – Angelique

感謝您的參與！我發佈的完全是我在我的模板中編碼的;但是，你所說的顯然是從Exp：resso Store mod渲染的，我沒有第一個線索來看看編輯它。我在哪裏顯示類別而不是類別中的產品，我的網格佈局運行良好，但將其應用於刺激並未奏效 - 因此，我在此停下來尋求幫助。 :)這是基於EXPRESSION ENGINE的商店，而不是WP。 :)你是對的，我絕對不會控制標記... –

所以，安德魯指出，您的示例代碼並沒有真正匹配什麼在您的網站。在.StoreContent-Index格內，您的每一個產品都被包裝在一個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; 
}

這應該給你你正在尋找的佈局。

來源

2016-03-25 19:42:13 Angelique

Angelique，謝謝！我現在就去嘗試並報告回來！交叉手指！:) –

Angelique，你太棒了，我不能夠感謝你。這完全是我想要的。謝謝！！（還有其他人也回覆了！:)） –

小提琴不能正確渲染。

我不認爲你的CSS命名約定是有效的

ul.StoreContent-ProductIndexList李

你應該只使用StoreContent-ProductIndexList類;或

.StoreContent-ProductIndexList李

我會研究Flexbox的。它確實有助於對齊（某人的CodePen示例：http://codepen.io/HugoGiraudel/pen/LklCv）。
.StoreContent-ProductIndexList {display：flex; justify-content：space-around; }

你可能想給你的「禮」行一個類名太

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

來源

2016-03-25 18:40:47

選擇器'ul.StoreContent-ProductIndexList li'是一個非常有效的CSS選擇器，你可以通過DevTools來驗證它，或者通過添加規則'background：red; jsFiddle並觀察顏色是怎樣變化的 –

無序列表對齊 - 產品並排

回答

相關問題