Question

我有一个长的无序列表，列表项有不同的类。

让我们做

0级

1级

我希望它们每次到达level0时都显示“inline”我想让它移回到最后一个level0的顶部和右边，所以它看起来像

LEVEL0 LEVEL0 LEVEL0

等级1等级1等级1

这些是自动生成的，所以我可以添加额外的类或放置div来分隔它们。这太容易了。

<ul class="sitemap">
  <li class="level-0"><a href="https://popstops.com/graphic-inserts">Graphic Inserts</a></li>
  <li class="level-1" style="padding-left:20px;"><a href="https://popstops.com/graphic-inserts/stock-graphics">Stock Graphics</a></li>
  <li class="level-2" style="padding-left:40px;"><a href="https://popstops.com/graphic-inserts/stock-graphics/36-graphics">36" Graphics</a></li>
  <li class="level-2" style="padding-left:40px;"><a href="https://popstops.com/graphic-inserts/stock-graphics/18-graphics">18" Graphics</a></li>
  <li class="level-2" style="padding-left:40px;"><a href="https://popstops.com/graphic-inserts/stock-graphics/12-graphics">12" Graphics</a></li>
  <li class="level-2" style="padding-left:40px;"><a href="https://popstops.com/graphic-inserts/stock-graphics/72-graphics">72" Graphics</a></li>
  <li class="level-1" style="padding-left:20px;"><a href="https://popstops.com/graphic-inserts/editable-graphics">Editable Graphics</a></li>
  <li class="level-2" style="padding-left:40px;"><a href="https://popstops.com/graphic-inserts/editable-graphics/36-editable-graphics">36" Editable Graphics</a></li>
  <li class="level-2" style="padding-left:40px;"><a href="https://popstops.com/graphic-inserts/editable-graphics/12-editable-graphics">12" Editable Graphics</a></li>
  <li class="level-2" style="padding-left:40px;"><a href="https://popstops.com/graphic-inserts/editable-graphics/18-editable-graphics">18" Editable Graphics</a></li>
  <li class="level-2" style="padding-left:40px;"><a href="https://popstops.com/graphic-inserts/editable-graphics/72-editable-graphics">72" Editable Graphics</a></li>
  <li class="level-1" style="padding-left:20px;"><a href="https://popstops.com/graphic-inserts/custom-graphics">Custom Graphics</a></li>
  <li class="level-2" style="padding-left:40px;"><a href="https://popstops.com/graphic-inserts/custom-graphics/12-custom-graphics">12" Custom Graphics</a></li>
  <li class="level-2" style="padding-left:40px;"><a href="https://popstops.com/graphic-inserts/custom-graphics/18-custom-graphics">18" Custom Graphics</a></li>
  <li class="level-2" style="padding-left:40px;"><a href="https://popstops.com/graphic-inserts/custom-graphics/36-custom-graphics">36" Custom Graphics</a></li>
  <li class="level-0"><a href="https://popstops.com/popstops">Garage Stops</a></li>
  <li class="level-1" style="padding-left:20px;"><a href="https://popstops.com/popstops/18-garage-stop-493">18" Garage Stop</a></li>
  <li class="level-1" style="padding-left:20px;"><a href="https://popstops.com/popstops/36-garage-stop-455">36" Garage Stop</a></li>
  <li class="level-1" style="padding-left:20px;"><a href="https://popstops.com/popstops/72-garage-stop-494">72" Garage Stop</a></li>
  <li class="level-0"><a href="https://popstops.com/featured">Featured</a></li>
  <li class="level-0"><a href="https://popstops.com/displays">Displays</a></li>
  <li class="level-1" style="padding-left:20px;"><a href="https://popstops.com/displays/pop-displays">Pop Displays</a></li>
  <li class="level-1" style="padding-left:20px;"><a href="https://popstops.com/displays/retail-signage">Retail Signage</a></li>
  <li class="level-1" style="padding-left:20px;"><a href="https://popstops.com/displays/wheel-chocks">Wheel Chocks</a></li>
  <li class="level-0"><a href="https://popstops.com/other-uses">Other Uses</a></li>
  <li class="level-0"><a href="https://popstops.com/accessories">Accessories</a></li>
  <li class="level-1" style="padding-left:20px;"><a href="https://popstops.com/accessories/connector">Connector</a></li>
</ul>

Answer 1

如果您愿意嵌套列表，这就变得非常简单了。

我已经使用inline-block向您提供了一个非常基本的示例，为您提供列。 Flexbox在这里也可能有所帮助。

.sitemap {padding:0;}
.sitemap ul{padding-left:20px; padding-bottom:10px;}
.sitemap>li {display:inline-block; vertical-align:top; border-right: 1px solid black; padding-right: 2px;}

<ul class="sitemap">
  <li><a href="https://popstops.com/graphic-inserts">Graphic Inserts</a>
    <ul class="level-1">
      <li><a href="https://popstops.com/graphic-inserts/stock-graphics">Stock Graphics</a>
        <ul class="level-2">
          <li><a href="https://popstops.com/graphic-inserts/stock-graphics/36-graphics">36" Graphics</a></li>
          <li><a href="https://popstops.com/graphic-inserts/stock-graphics/18-graphics">18" Graphics</a></li>
          <li><a href="https://popstops.com/graphic-inserts/stock-graphics/12-graphics">12" Graphics</a></li>
          <li><a href="https://popstops.com/graphic-inserts/stock-graphics/72-graphics">72" Graphics</a></li>
        </ul>
      </li>
      <li><a href="https://popstops.com/graphic-inserts/editable-graphics">Editable Graphics</a>
        <ul class="level-2">
          <li><a href="https://popstops.com/graphic-inserts/editable-graphics/36-editable-graphics">36" Editable Graphics</a></li>
          <li><a href="https://popstops.com/graphic-inserts/editable-graphics/12-editable-graphics">12" Editable Graphics</a></li>
          <li><a href="https://popstops.com/graphic-inserts/editable-graphics/18-editable-graphics">18" Editable Graphics</a></li>
          <li><a href="https://popstops.com/graphic-inserts/editable-graphics/72-editable-graphics">72" Editable Graphics</a></li>
        </ul>
      </li>
      <li><a href="https://popstops.com/graphic-inserts/custom-graphics">Custom Graphics</a>
        <ul class="level-2">
          <li><a href="https://popstops.com/graphic-inserts/custom-graphics/12-custom-graphics">12" Custom Graphics</a></li>
          <li><a href="https://popstops.com/graphic-inserts/custom-graphics/18-custom-graphics">18" Custom Graphics</a></li>
          <li><a href="https://popstops.com/graphic-inserts/custom-graphics/36-custom-graphics">36" Custom Graphics</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="https://popstops.com/popstops">Garage Stops</a>
    <ul class="level-1">
      <li><a href="https://popstops.com/popstops/18-garage-stop-493">18" Garage Stop</a></li>
      <li><a href="https://popstops.com/popstops/36-garage-stop-455">36" Garage Stop</a></li>
      <li><a href="https://popstops.com/popstops/72-garage-stop-494">72" Garage Stop</a></li>
    </ul>
  </li>
  <li><a href="https://popstops.com/featured">Featured</a></li>
  <li><a href="https://popstops.com/displays">Displays</a>
    <ul class="level-1">
      <li><a href="https://popstops.com/displays/pop-displays">Pop Displays</a></li>
      <li><a href="https://popstops.com/displays/retail-signage">Retail Signage</a></li>
      <li><a href="https://popstops.com/displays/wheel-chocks">Wheel Chocks</a></li>
    </ul>
  </li>
  <li><a href="https://popstops.com/other-uses">Other Uses</a></li>
  <li><a href="https://popstops.com/accessories">Accessories</a>
    <ul class="level-1">
      <li><a href="https://popstops.com/accessories/connector">Connector</a></li>
    </ul>
  </li>
</ul>

如何根据li class

1 个答案: