制作ul項目列表並將其換行到其父項

Question

所以我有一個菜單，我從php查詢生成的輸出如下：

 #ultra-menu { width: 92%; background-color: rgba(255, 255, 255, 0.90); position: absolute; left: 0px; right: 0px; margin: auto; border-radius: 35px; max-height: 300px; padding: 25px; top: 82px; z-index: 999999; } #ultra-menu h3 { text-transform: uppercase; color: #e4810b; text-align: left; margin-top: 0px; padding-top: 0px; } #ultra-menu a { color: #28281e; } #ultra-menu a:hover { color: #e4810b; } #ultra-menu ul { margin: 7px; float: left; } .um-cat { display: none; text-align: left; } #um-fresh { display: block; } 

 <nav id="ultra-menu" class="site-sub-navigation align-center" role="navigation"> <div id="um-fresh" class="um-cat"> <h3><b>Freshwater</b></h3> <ul> <li class="um-par"><a href="/books-media/"><b>Books &amp; Media</b></a> </li> </ul> <ul> <li class="um-par"><a href="/fishing-accessories/"><b>Fishing Accessories</b></a> </li> <li class="um-sub"><a href="/fishing-accessories/fishing-nets/">Fishing Nets</a> </li> <li class="um-sub"><a href="/fishing-accessories/fishing-tools-accessories/">Fishing Tools &amp; Accessories</a> </li> <li class="um-sub"><a href="/fishing-accessories/rod-accessories/">Rod Accessories</a> </li> <li class="um-sub"><a href="/fishing-accessories/smokers-flasks/">Smokers &amp; Flasks</a> </li> <li class="um-sub"><a href="/fishing-accessories/sunglasses/">Sunglasses</a> </li> <li class="um-sub"><a href="/fishing-accessories/wader-accessories/">Wader Accessories</a> </li> <li class="um-sub"><a href="/fishing-accessories/wader-repair/">Wader Repair</a> </li> <li class="um-sub"><a href="/fishing-accessories/wading-staffs/">Wading Staffs</a> </li> </ul> <ul> <li class="um-par"><a href="/fishing-clothing/"><b>Fishing Clothing</b></a> </li> <li class="um-sub"><a href="/fishing-clothing/coats-jackets/">Coats &amp; Jackets</a> </li> <li class="um-sub"><a href="/fishing-clothing/gloves/">Gloves</a> </li> <li class="um-sub"><a href="/fishing-clothing/hats-caps/">Hats &amp; Caps</a> </li> <li class="um-sub"><a href="/fishing-clothing/freshwater-fishing-clothing-jackets/">Jackets</a> </li> <li class="um-sub"><a href="/fishing-clothing/jumpers-fleeces/">Jumpers &amp; Fleeces</a> </li> <li class="um-sub"><a href="/fishing-clothing/life-jackets/">Life jackets &amp; Collars</a> </li> <li class="um-sub"><a href="/fishing-clothing/socks/">Socks</a> </li> <li class="um-sub"><a href="/fishing-clothing/thermals-base-layers/">Thermals &amp; Base Layers</a> </li> <li class="um-sub"><a href="/fishing-clothing/trousers-shorts/">Trousers</a> </li> <li class="um-sub"><a href="/fishing-clothing/vests-waistcoats/">Vests &amp; Waistcoats</a> </li> <li class="um-sub"><a href="/fishing-clothing/waders-boots/">Waders &amp; Boots</a> </li> <li class="um-sub"><a href="/fishing-clothing/wading-jackets/">Wading Jackets</a> </li> </ul> <ul> <li class="um-par"><a href="/fishing-equipment/"><b>Fishing Equipment</b></a> </li> <li class="um-sub"><a href="/fishing-equipment/backing-nylon-accessories/">Backing, Nylon &amp; Accessories</a> </li> <li class="um-sub"><a href="/fishing-equipment/fly-lines/">Fly Lines</a> </li> <li class="um-sub"><a href="/fishing-equipment/fly-reels/">Fly Reels</a> </li> <li class="um-sub"><a href="/fishing-equipment/fly-rods/">Fly Rods</a> </li> <li class="um-sub"><a href="/fishing-equipment/leaders-tippets/">Leaders &amp; Tippets</a> </li> <li class="um-sub"><a href="/fishing-equipment/freshwater-fishing-equipment-rod-accessories/">Rod Accessories</a> </li> <li class="um-sub"><a href="/fishing-equipment/spools/">Spools</a> </li> </ul> <ul> <li class="um-par"><a href="/flies-fly-tying/"><b>Flies &amp; Fly Tying</b></a> </li> </ul> <ul> <li class="um-par"><a href="/gifts-miscellaneous/"><b>Gifts &amp; Miscellaneous</b></a> </li> </ul> <ul> <li class="um-par"><a href="/luggage-storage/"><b>Luggage &amp; Storage</b></a> </li> </ul> <ul> <li class="um-par"><a href="/spinning/"><b>Spinning</b></a> </li> <li class="um-sub"><a href="/spinning/braid-line/">Braid &amp; Line</a> </li> <li class="um-sub"><a href="/spinning/spinners/">Spinners</a> </li> <li class="um-sub"><a href="/spinning/spinning-accessories/">Spinning Accessories</a> </li> <li class="um-sub"><a href="/spinning/spinning-reels/">Spinning Reels</a> </li> <li class="um-sub"><a href="/spinning/spinning-rods/">Spinning Rods</a> </li> </ul> </div> </nav> 

我在這里嘗試做的是讓它們從左到右列出包裝像圖像一樣的容器：

因此，不是在每個<ul>下面都有空格，我希望其他<ul>適合在下面。

我知道這可以使用flex box，但為了兼容性，我不希望它們在我的網站上。

Answer 1

Css只有你可以在你的父元素＃um-fresh中使用column-count 。

然后在你的孩子身上，你想要像使用display: inline-block;

雖然它在技術上與Flex-box具有相同的支持，但我認為它比柔性盒更容易解決。

Flex Box兼容性

列數兼容性

更安全的行為可能是使用JSMasonry，因為缺少IE9和8支持。

雖然說你可以為<IE9一個條件語句並激活jsMasonry，但你不會用額外的js污染你的站點。 這樣你只有一個CSS版本，然后當用戶在舊版瀏覽器上時，他們會獲得js砌體，這樣它看起來仍然是正確的。

此外，如果您使用的是Modernizr，您可以檢測列數是否正常，如果沒有，則運行jsMasonary。

---

所以你的列計數css就像：

 #ultra-menu { width: 92%; background-color: rgba(255, 255, 255, 0.90); position: absolute; left: 0px; right: 0px; margin: auto; border-radius: 35px; max-height: 300px; padding: 25px; top: 82px; z-index: 999999; } #ultra-menu h3 { text-transform: uppercase; color: #e4810b; text-align: left; margin-top: 0px; padding-top: 0px; } #ultra-menu a { color: #28281e; } #ultra-menu a:hover { color: #e4810b; } #ultra-menu ul { margin: 7px; display: inline-block; } .um-cat { display: none; text-align: left; } #um-fresh { display: block; -moz-column-count: 4; -webkit-column-count: 4; column-count: 4; } 

 <nav id="ultra-menu" class="site-sub-navigation align-center" role="navigation"> <div id="um-fresh" class="um-cat"> <h3><b>Freshwater</b></h3> <ul> <li class="um-par"><a href="/books-media/"><b>Books &amp; Media</b></a> </li> </ul> <ul> <li class="um-par"><a href="/fishing-accessories/"><b>Fishing Accessories</b></a> </li> <li class="um-sub"><a href="/fishing-accessories/fishing-nets/">Fishing Nets</a> </li> <li class="um-sub"><a href="/fishing-accessories/fishing-tools-accessories/">Fishing Tools &amp; Accessories</a> </li> <li class="um-sub"><a href="/fishing-accessories/rod-accessories/">Rod Accessories</a> </li> <li class="um-sub"><a href="/fishing-accessories/smokers-flasks/">Smokers &amp; Flasks</a> </li> <li class="um-sub"><a href="/fishing-accessories/sunglasses/">Sunglasses</a> </li> <li class="um-sub"><a href="/fishing-accessories/wader-accessories/">Wader Accessories</a> </li> <li class="um-sub"><a href="/fishing-accessories/wader-repair/">Wader Repair</a> </li> <li class="um-sub"><a href="/fishing-accessories/wading-staffs/">Wading Staffs</a> </li> </ul> <ul> <li class="um-par"><a href="/fishing-clothing/"><b>Fishing Clothing</b></a> </li> <li class="um-sub"><a href="/fishing-clothing/coats-jackets/">Coats &amp; Jackets</a> </li> <li class="um-sub"><a href="/fishing-clothing/gloves/">Gloves</a> </li> <li class="um-sub"><a href="/fishing-clothing/hats-caps/">Hats &amp; Caps</a> </li> <li class="um-sub"><a href="/fishing-clothing/freshwater-fishing-clothing-jackets/">Jackets</a> </li> <li class="um-sub"><a href="/fishing-clothing/jumpers-fleeces/">Jumpers &amp; Fleeces</a> </li> <li class="um-sub"><a href="/fishing-clothing/life-jackets/">Life jackets &amp; Collars</a> </li> <li class="um-sub"><a href="/fishing-clothing/socks/">Socks</a> </li> <li class="um-sub"><a href="/fishing-clothing/thermals-base-layers/">Thermals &amp; Base Layers</a> </li> <li class="um-sub"><a href="/fishing-clothing/trousers-shorts/">Trousers</a> </li> <li class="um-sub"><a href="/fishing-clothing/vests-waistcoats/">Vests &amp; Waistcoats</a> </li> <li class="um-sub"><a href="/fishing-clothing/waders-boots/">Waders &amp; Boots</a> </li> <li class="um-sub"><a href="/fishing-clothing/wading-jackets/">Wading Jackets</a> </li> </ul> <ul> <li class="um-par"><a href="/fishing-equipment/"><b>Fishing Equipment</b></a> </li> <li class="um-sub"><a href="/fishing-equipment/backing-nylon-accessories/">Backing, Nylon &amp; Accessories</a> </li> <li class="um-sub"><a href="/fishing-equipment/fly-lines/">Fly Lines</a> </li> <li class="um-sub"><a href="/fishing-equipment/fly-reels/">Fly Reels</a> </li> <li class="um-sub"><a href="/fishing-equipment/fly-rods/">Fly Rods</a> </li> <li class="um-sub"><a href="/fishing-equipment/leaders-tippets/">Leaders &amp; Tippets</a> </li> <li class="um-sub"><a href="/fishing-equipment/freshwater-fishing-equipment-rod-accessories/">Rod Accessories</a> </li> <li class="um-sub"><a href="/fishing-equipment/spools/">Spools</a> </li> </ul> <ul> <li class="um-par"><a href="/flies-fly-tying/"><b>Flies &amp; Fly Tying</b></a> </li> </ul> <ul> <li class="um-par"><a href="/gifts-miscellaneous/"><b>Gifts &amp; Miscellaneous</b></a> </li> </ul> <ul> <li class="um-par"><a href="/luggage-storage/"><b>Luggage &amp; Storage</b></a> </li> </ul> <ul> <li class="um-par"><a href="/spinning/"><b>Spinning</b></a> </li> <li class="um-sub"><a href="/spinning/braid-line/">Braid &amp; Line</a> </li> <li class="um-sub"><a href="/spinning/spinners/">Spinners</a> </li> <li class="um-sub"><a href="/spinning/spinning-accessories/">Spinning Accessories</a> </li> <li class="um-sub"><a href="/spinning/spinning-reels/">Spinning Reels</a> </li> <li class="um-sub"><a href="/spinning/spinning-rods/">Spinning Rods</a> </li> </ul> </div> </nav>