制作ul项目列表并将其换行到其父项

Question

So I have a menu that I generate from a php query the output looks like:

 #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> 

What I am trying to do here is make them list from left to right wrap its container like the image:

So that instead of having whitespace under each <ul> I would like the other <ul> to fit underneath.

I know this is possible with flex box's but for compatibility I don't want them on my site.

Answer 1

Css only you could use column-count on your parent element in your case #um-fresh.

Then on your children you want to act masonry like you would use display: inline-block;

Though it technically has the same support as Flex-box's I would say it's an easier solution than flex box.

Flex Box Compatibility

Column Count Compatibility

A safer conduct might be to use JSMasonry because of the lack of IE9 and 8 support.

Though saying that you could put in a conditional statement for <IE9 and activate jsMasonry so you are not polluting your site with additional js. That way you have a CSS only version and then when the user is on an older browser they get the js masonry so that it still looks right.

Also if you are using Modernizr you could detect if column-count is working and if not then run jsMasonary.

---

so your css for Column Count would be like:

 #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>