Question

这可能是一个非常基本的问题但我在搜索数小时后无法在Google上找到任何帮助，所以我发布了它。

我希望使用无序列表获得这样的菜单。

在我的情况下，所有额外的列表项都离开div，所以我将所有li元素浮动到左边但是有新问题。当底部没有更多的空间时，我希望李在旁边，但即使底部有空间，它们也总是在侧面。例如。在下面的图像中我希望“女人”低于“男人”列表不在旁边（'如果你知道我的意思，不要采取错误的方式;）

所以任何人都可以帮助我

HTML

<div class="wrapper">
                  <div class="list">
                    <ul>
                      <li class="">
                          <a href="#" class="heading">ELECTRONICS</a>
                          <ul><li>
                          <a href="#" class="item">Mobiles</a></li><li>
                          <a href="#" class="item">Tablets</a></li><li>
                          <a href="#" class="item">Laptops</a></li><li>
                          <a href="#" class="item">Network Components</a></li><li>
                          <a href="#" class="item">Computer Peripherals</a></li><li>
                          <a href="#" class="item">Mobile Accessories</a></li><li>
                          <a href="#" class="item">Television</a></li><li>
                          <a href="#" class="item">Home Appliences</a></li><li>
                          <a href="#" class="item">Kitchen Appliences</a></li><li>
                          <a href="#" class="item">Kitchen Appliences</a></li><li>
                          <a href="#" class="item">Gaming</a></li><li>
                          <a href="#" class="item">Cameras</a></li></ul>
                      </li>
                      <li>
                        <a href="#" class="heading">MEN</a>
                        <ul>
                          <li><a href="#" class="item">Clothing</a></li>
                          <li><a href="#" class="item">Footware</a></li>
                          <li><a href="#" class="item">Watches</a></li>
                          <li><a href="#" class="item">Accessories</a></li>
                          <li><a href="#" class="item">Spectacle Frames</a></li>
                          <li><a href="#" class="item">Bag, Belts & Wallets</a></li>
                          <li><a href="#" class="item">Sunglasses</a></li>
                          <li><a href="#" class="item">Fragrances</a></li>
                          <li><a href="#" class="item">Grooming & Wellness</a></li>
                        </ul>
                      </li>
                      <li>
                        <a href="#" class="heading">WOMEN</a>
                      </li>
                      <li>hello></li>
                      <li>hello></li>
                      <li>hello></li>
                      <li>hello></li>
                    </ul>
                  </div>
                </div>

CSS

     .wrapper {
           display:

 none;
       height: 400px;
       width: 1266px;
    }
   .wrapper > di ul {
       float: lft;  
 }
.wrapper div {
  height: 100%;
  width: 100%;
  background-color: inherit;
  padding-top: 30px;  
}

.list a.heading {
  font-size: 17px;
  font-weight: bold;
  padding-bottom: 10px;
  padding-right: 10px;
}

.list a.item {
  font-size: 15px;
  font-family: raleway, sans-serif;
  padding-left: 10px;
  padding-top: 9px;
  padding-right: 10px;
}

.list > ul > li {
  float: left;
}

Answer 1

如果查看HTMl，您会看到已存在的列表存在于一个无序列表项中的无序列表中。但是，您的hello节点不在无序列表中，而是在常规列表项中。

将<ul>标记添加到您的列表项以使其正常工作，请查看我的代码段以了解具体方法。

.wrapper {
    height: 400px;
    width: 1266px;
}
.wrapper > div ul {
    float: left;
}
.wrapper div {
    height: 100%;
    width: 100%;
    background-color: inherit;
    padding-top: 30px;
}

.list a.heading {
    font-size: 17px;
    font-weight: bold;
    padding-bottom: 10px;
    padding-right: 10px;
}

.list a.item {
    font-size: 15px;
    font-family: raleway, sans-serif;
    padding-left: 10px;
    padding-top: 9px;
    padding-right: 10px;
}

.list > ul > li {
    float: left;
}

<div class="wrapper">
    <div class="list">
        <ul>
            <li class="">
                <a href="#" class="heading">ELECTRONICS</a>
                <ul><li>
                    <a href="#" class="item">Mobiles</a></li><li>
                    <a href="#" class="item">Tablets</a></li><li>
                    <a href="#" class="item">Laptops</a></li><li>
                    <a href="#" class="item">Network Components</a></li><li>
                    <a href="#" class="item">Computer Peripherals</a></li><li>
                    <a href="#" class="item">Mobile Accessories</a></li><li>
                    <a href="#" class="item">Television</a></li><li>
                    <a href="#" class="item">Home Appliences</a></li><li>
                    <a href="#" class="item">Kitchen Appliences</a></li><li>
                    <a href="#" class="item">Kitchen Appliences</a></li><li>
                    <a href="#" class="item">Gaming</a></li><li>
                    <a href="#" class="item">Cameras</a></li></ul>
            </li>
            <li>
                <a href="#" class="heading">MEN</a>
                <ul>
                    <li><a href="#" class="item">Clothing</a></li>
                    <li><a href="#" class="item">Footware</a></li>
                    <li><a href="#" class="item">Watches</a></li>
                    <li><a href="#" class="item">Accessories</a></li>
                    <li><a href="#" class="item">Spectacle Frames</a></li>
                    <li><a href="#" class="item">Bag, Belts & Wallets</a></li>
                    <li><a href="#" class="item">Sunglasses</a></li>
                    <li><a href="#" class="item">Fragrances</a></li>
                    <li><a href="#" class="item">Grooming & Wellness</a></li>
                </ul>
            </li>
            <li>
                <a href="#" class="heading">WOMEN</a>
            </li>
            <ul> <!-- <<<<<<<<<<< notice these <<<<<<<<<<<<<<<<<<< -->
                <li>hello></li>
                <li>hello></li>
                <li>hello></li>
                <li>hello></li>
            </ul> <!-- <<<<<<<<<< notice these <<<<<<<<<<<<<<<<<<< -->
        </ul>
    </div>
</div>

使用无序列表创建菜单？

1 个答案: