在無序列表的行之間添加div
[英]Add a div between rows in an unordered list
問題描述
是否可以在無序列表的列表項之間添加一個div（跨頁面）？
例如，下圖顯示了電子商務網站的產品列表頁面。 每個產品圖塊將是無序列表中的列表項。 我們想在列表項的1行之間插入一個休止符，並添加一個跨頁面的div。 此處增加的復雜性是每行的圖塊會根據屏幕大小和斷點而變化。
2 個解決方案
解決方案1
1 2019-09-02 22:37:31
有可能，但並非所有瀏覽器都能按預期方式呈現它，因為它不是有效的html。
您可以將列表完全替換為div's以獲得更好的保證...
證明它有效：
ul { display: flex; flex-wrap: wrap; flex-direction: row; } li { margin: 5px; background-color: green; width: 50px; height: 40px; } div { width: 100%; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Test</title> </head> <body> <ul> <li>123</li> <li>123</li> <li>123</li> <li>123</li> <div>This the between content</div> <li>123</li> <li>123</li> <li>123</li> <li>123</li> </ul> </body> </html>
解決方案2
1 2019-09-03 02:22:15
據我了解，您需要一個解決方案，使行中的項目數量可變，同時仍將div牢牢固定在適當的位置。 如果您可以將特殊的div始終排在第二行，那么可以使用一種僅涉及CSS的簡單解決方案，其中涉及flexbox和一些絕對定位。
將您的列表包裝在提供新堆疊上下文的容器中（
position: relative;）。將您的
ul和您的特殊div放在該容器中。使用flexbox將列表放入靈活的塊狀網格中，並為列表項設置一個高度。
通過為列表的第一個孩子設置底邊距為
div騰出空間。將
div定位為absolute，使其高度與您所創建的底部邊距非常吻合，在頂部位置與列表項的高度（加上邊距）相匹配，並且寬度為100％。
* { box-sizing: border-box; } .with-static-row { position: relative; --margin: 0.5rem; --box: 10rem; --banner: 7rem; } ul{ display: flex; flex-wrap: wrap; list-style: none; padding-left: 0; justify-content: center; } ul > :nth-child(1) { margin-bottom: calc(var(--banner) + var(--margin) * 3); } li { flex-basis: var(--box); height: var(--box); border: 3px solid black; background-color: #eee; margin: var(--margin); } li, .static { display: flex; justify-content: center; align-items: center; } .static { width: 100%; border: 3px dashed black; height: var(--banner); position: absolute; top: calc(var(--box) + var(--margin) * 3) }
<div class="with-static-row"> <ul> <li><li></li> <li><li></li> <li><li></li> <li><li></li> <li><li></li> <li><li></li> <li><li></li> <li><li></li> <li><li></li> <li><li></li> <li><li></li> <li><li></li> </ul> <div class="static"><div></div> </div>
如何使用帶有表單驗證的 javascript 創建將帶有 li 的無序列表添加到 div
[英]How to create add an unordered list with li to a div using javascript with form validation
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
使用無序列表擴展DIV
隱藏並顯示具有無序列表的div
將類添加到包含Dog 1及其之間的行的div中
如何使用帶有表單驗證的 javascript 創建將帶有 li 的無序列表添加到 div
刪除並重新添加 Class 屬性<div>無序列表項</div><div id="text_translate"><p>這是我能夠解決的答案。 想要在按鈕單擊事件從 Hyperlink1 發生到 Hyperlink3 后更改 css class="jsTree-clicked"。 </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-js lang-js prettyprint-override"> $(document).ready(function () { //remove Class $('#myJSTree').find('.jsTree-clicked').removeClass('jsTree-clicked'); //need to do add it to List Item which has Id =3 //check the list item which has id =3 if so add the class to it // It is not a button click event. $('#myJSTree li').each(function (i, li) { console.log('<li> id =' + $(li).attr('id')); var myIdVal = $(li).attr('id'); if (myIdVal == 3) { $(this).addClass('jsTree-clicked'); } }); });</pre><pre class="snippet-code-css lang-css prettyprint-override"> .jsTree-clicked { background-color:red;}</pre><pre class="snippet-code-html lang-html prettyprint-override"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="myJSTree"> <ul class="nav nav-list"> <li id="1"> <a class="jsTree-clicked" title="Hyperlink1">HyperLink1</a> </li> <li id="2"> <a title="Hyperlink2">HyperLink2</a> </li> <li id="3"> <a title="Hyperlink3">HyperLink3</a> </li> </ul> </div></pre></div></div><p></p><p> 單擊超鏈接時，JsTree 添加一個 class="jsTree-clicked"。 當您導航到不同的節點時，它將刪除並重新添加相同的 class 到導航節點。</p><p> 預期的</p><p>我想要一個 function 根據 div 內的 ID 刪除給定列表項的 [class="jsTree-clicked"]。 並通過傳遞 Key ie ID 將 [class="jsTree-clicked"] 重新添加到任何 ListItem。</p><p> 我希望我能夠解釋我的問題。 謝謝</p><p>我的 JSTree 是第三方開源的。</p></div>
在特定類別的div中隱藏無序列表
有許多無序列表項的div區域溢出
jQuery將一系列div標簽制成無序列表
創建動態無序列表並將其附加到div
無法更改包含無序列表的div的背景
相關標簽