Question

我的dom中有一个嵌套的列表结构。我希望子列表元素水平列出并占据全宽。我怎样才能做到这一点？我的代码

＆＃13;

.workicons-list {
    padding: 0;
    margin: 0;
    list-style:none;
    display: inline-block;
    background: #fff;
}
.workicons-list li {
    float: left;
   max-width:224px;
    border:1px solid #000;
}

.workicons-sub-list {
      padding: 0;
    margin: 0;
    list-style:none;
    display: inline-block;
    
}
.workicons-sub-list li {
     float:left;
    max-width:224px;
    border: none;
}

＆＃13;

 <div class="options-row">
          
            <ul class="workicons-list">
                <li><a href="#"><img src="https://s32.postimg.org/8t9ekfovp/brush.png" class="img-responsive"></a>
                    
                      <ul class="workicons-sub-list">
                          <li><a href="#"><img src="https://s31.postimg.org/a6irdmg5n/cleaner.png" class="img-responsive"></a></li>
                          <li><a href="#"><img src="https://s31.postimg.org/a6irdmg5n/cleaner.png" class="img-responsive"></a></li>
                          <li><a href="#"><img src="https://s31.postimg.org/a6irdmg5n/cleaner.png" class="img-responsive"></a></li>
                          <li><a href="#"><img src="https://s31.postimg.org/a6irdmg5n/cleaner.png" class="img-responsive"></a></li>
                          <li><a href="#"><img src="https://s31.postimg.org/a6irdmg5n/cleaner.png" class="img-responsive"></a></li>
                           <li><a href="#"><img src="https://s31.postimg.org/a6irdmg5n/cleaner.png" class="img-responsive"></a></li>
                    </ul>
                    
                </li>
                <li><a href="#"><img src="https://s32.postimg.org/8t9ekfovp/brush.png" class="img-responsive"></a></li>
                <li><a href="#"><img src="https://s32.postimg.org/8t9ekfovp/brush.png" class="img-responsive"></a></li>
                <li><a href="#"><img src="https://s32.postimg.org/8t9ekfovp/brush.png" class="img-responsive"></a></li>
                <li><a href="#"><img src="https://s32.postimg.org/8t9ekfovp/brush.png" class="img-responsive"></a></li>
                <li><a href="#"><img src="https://s32.postimg.org/8t9ekfovp/brush.png" class="img-responsive"></a></li>
            </ul>
           
            
        </div>

＆＃13;

这是全屏显示的样子这就是我想要它的方式

Answer 1

＆＃13;

.workicons-list {
    padding: 0;
    margin: 0;
    list-style:none;
    display: inline-block;
    background: #fff;
  position: relative;
}
.workicons-list li {
    float: left;
   max-width:224px;
    border:1px solid #000;
}
.workicons-list li.expanded {
  max-width: 100%;
}

.workicons-sub-list {
      padding: 0;
    margin: 0;
    list-style:none;
    display: block;
  position:absolute;
  top:235px;
  left:0;
  width: 100%
    
}
.workicons-sub-list li {
     float:left;
    max-width:224px;
    border: none;
}

＆＃13;

<div class="options-row">
          
            <ul class="workicons-list">
                <li class="expanded"><a href="#"><img src="https://s32.postimg.org/8t9ekfovp/brush.png" class="img-responsive"></a>
                    
                      <ul class="workicons-sub-list">
                          <li><a href="#"><img src="https://s31.postimg.org/a6irdmg5n/cleaner.png" class="img-responsive"></a></li>
                          <li><a href="#"><img src="https://s31.postimg.org/a6irdmg5n/cleaner.png" class="img-responsive"></a></li>
                          <li><a href="#"><img src="https://s31.postimg.org/a6irdmg5n/cleaner.png" class="img-responsive"></a></li>
                          <li><a href="#"><img src="https://s31.postimg.org/a6irdmg5n/cleaner.png" class="img-responsive"></a></li>
                          <li><a href="#"><img src="https://s31.postimg.org/a6irdmg5n/cleaner.png" class="img-responsive"></a></li>
                           <li><a href="#"><img src="https://s31.postimg.org/a6irdmg5n/cleaner.png" class="img-responsive"></a></li>
                    </ul>
                    
                </li>
                <li><a href="#"><img src="https://s32.postimg.org/8t9ekfovp/brush.png" class="img-responsive"></a></li>
                <li><a href="#"><img src="https://s32.postimg.org/8t9ekfovp/brush.png" class="img-responsive"></a></li>
                <li><a href="#"><img src="https://s32.postimg.org/8t9ekfovp/brush.png" class="img-responsive"></a></li>
                <li><a href="#"><img src="https://s32.postimg.org/8t9ekfovp/brush.png" class="img-responsive"></a></li>
                <li><a href="#"><img src="https://s32.postimg.org/8t9ekfovp/brush.png" class="img-responsive"></a></li>
            </ul>
           
            
        </div>

＆＃13;

您的.workicons-list li设置为最大宽度224，因此默认情况下其中的任何内容都只有那么宽。并且，在浮动的情况下，它只会将内部菜单项向下平铺。您可能需要将类添加到打开的嵌套菜单的父li中，以便将其宽度覆盖为100％或任何宽度。

此外，不确定展开时子菜单是否位于父菜单上的所需行为？

如何使子列表元素水平并占据全宽

1 个答案: