我在 Wordpress 中創建了一個包含兩列的子選單，但它遠非完美。你可以在這里看到它——它在博客 >> 山脈下。
它目前看起來像這樣。
我希望它看起來像這樣。
到目前為止我使用的代碼：
/* Sub menu columns */
.sub-menu-columns ul.sub-menu.dropdown li {
display: grid;
grid-template-columns: 175px 175px;
width: 50%;
}
.sub-menu-columns ul.sub-menu li:nth-child(odd) {
float: left;
}
.sub-menu-columns ul.sub-menu li:nth-child(even) {
float: left;
}
.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) {
line-height: 45px;
width: max-content;
}我遇到的問題：
- 較長的名字不適合放在盒子里
- 在移動設備上，僅右側列中的部分名稱可見
我試圖回答的問題：
- 我如何獲得兩個整齊的子選單欄，它們可以放在他們的盒子里并且整齊地間隔開？
- 我如何在手機上整理這個？可能有媒體查詢，但我應該在里面放什么？
我嘗試過但對我不起作用的解決方案，或者至少不是 100%：
- 將 wordpress 子選單拆分為兩列
- https://www.phpcluster.com/how-to-split-wordpress-submenu-in-2-column/
- 我嘗試在計算機上添加
justify-content: space-evenly;或創建我想要的框，但在移動設備上使情況變得更糟justify-content: space-around;。.sub-menu-columns ul.sub-menu.dropdown li - 根據下面 SA Bappy 的說明，我已插入
.sub-menu-columns ul.sub-menu { column-count: 2; column-gap: 10px; }和洗掉.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) { line-height: 45px; width: max-content; }，這給了我想要的框，但左側的列從頁面溢位，文本居中，而不是左對齊。有什么建議可以改進該特定解決方案嗎？
在這里完全超出了我的深度，因此非常感謝任何輸入！我真的希望我可以只使用 CSS 來解決這個問題，因為我對這個編碼很陌生。
解決方案
感謝了不起的 SA Bappy，我解決了這個問題：
.sub-menu-columns ul.sub-menu {
column-count: 2;
column-gap: 10px;}
.sub-menu-columns .sub-menu li {
max-width: 250px;}
ul#menu-main-menu ul ul {right: unset; left: 100%;}
uj5u.com熱心網友回復：
您可以使用 CSS 列屬性。
.sub-menu-columns ul.sub-menu {
column-count: 2;
column-gap: 25px;
}
uj5u.com熱心網友回復：
調整列寬中的最小寬度，這樣您就可以為所有列設定最小寬度，或者您甚至可以為每列設定不同的最小寬度。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/435973.html
上一篇：如何在帖子上顯示類別和日期