1. 首页
  2. 问答
  3. 如何让孩子列表元素水平，并采取全宽​​

如何让孩子列表元素水平，并采取全宽​​

2016-07-27 156 views
1

我在DOM嵌套表结构。我希望水平列出子列表元素并获取全部宽度。我怎样才能做到这一点？ 我的代码如何让孩子列表元素水平，并采取全宽​​

.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; 
 
}
<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>

这是它的外观以全屏幕 enter image description here 这就是我希望它是 enter image description here

来源

2016-07-27 Athul

+2

如果你正在使用的引导，你可以用自己的网格系统去:) –

+0

@MarkoMackic我已经先尝试过了，失败了，我想嵌套第一内侧第二列表。像一个col-md-12内的六个col-md-2，第二个清单在每个col-md-2内将有另外六个col-md-2。如果你能展示，如何以网格的方式做到这一点，我非常高兴。但我不想修复行的位置 – Athul

回答

0 

.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; 
 
}
<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>

您.workicons列表里被设置为224最大宽度，所以它里面什么会被默认只有宽。而且，随着浮动，它只会平铺内部菜单项。您可能需要向打开的嵌套菜单的父级li添加一个类，以便可以将其宽度覆盖为100％或任何宽度。

而且，不知道所期望的行为是子菜单是ontop的父菜单的时候展开？

来源

2016-07-27 17:13:29 NikZ

+0

期望的行为是第一个菜单下的子菜单。你可以请你添加一个示例代码，你如何计划。我无法理解你在说什么 – Athul

+1

上面添加的代码让你关闭。既然你想要下面的子菜单，你必须从主菜单中设置一个相对位置，并将子菜单绝对放在相对于主菜单的位置。这样做会自动为您提供完整的宽度。 – NikZ

+0

这个工作适合你吗？ – NikZ

相关问题

 相关问题