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

时间：2015-07-16 13:07:16

标签： html css

所以我有一个菜单，我从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>

我在这里尝试做的是让它们从左到右列出包装容器，如图像：

enter image description here

所以我不希望在每个<ul>下面有空格，而是希望另一个<ul>适合在下面。

我知道这可以使用弹性盒子，但为了兼容性，我不想在我的网站上使用它们。

1 个答案:

答案 0 :(得分：1)

只有你可以在你的案例中使用column-count {um-fresh。

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

一样行事

虽然它在技术上与Flex-box具有相同的支持，但我认为它比弹性盒更容易解决。

Flex Box Compatibility

Column Count Compatibility

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

虽然说你可以为<IE9添加一个条件语句并激活jsMasonry，但你不会用其他js来污染你的网站。这样你只有一个CSS版本，然后当用户在旧版浏览器上时，他们会获得js砌体，这样它看起来仍然是正确的。

此外，如果您使用Modernizr，您可以检测列数是否正常，如果没有，则运行jsMasonary。

所以你的列计数css就像：

＆＃13;
＆＃13; 
#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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题