为什么我的< ul>扩展宽度以覆盖所有< li&gt ;? [英] Why doesn't my <ul> expand width to cover all the <li>?

问题描述

我有一个要通过flexbox创建的导航.我希望最大高度，并且在没有足够空间的情况下将<li>推送到新列.

I have a nav that I'm trying to create with flexbox. I want the to have a max height, and have the <li> push to a new column when there isn't enough space for it.

我已经显示了<ul> inline-flex. <li>跳至新列，但<ul>不会随<li>一起扩展-导致溢出效果

I have displayed the <ul> inline-flex. The <li> are jumping on to a new column, but the <ul> doesn't expand with the <li> - causing an overflowing effect

https://codepen.io/Woodenchops/pen/KGOYRK

ul {
      background: red;
      display: inline-flex;
      flex-wrap: wrap;
      flex-direction: column;
      max-height: 350px;
      padding: 1rem;
    }
    
    .sub-ul {
      background: none;
    }
    
    li {
      list-style: none;
      font-size: 46px;
    }
    
    .sub-li {
      font-size: 16px;
    }
    
    
    .oneColumn {
      width: auto;
    }
    
    .twoColumn {
      width: 490px;
    }
    
    .threeColumn {
      width: 980px;
    }

<ul class="sub-menu topul">
      <li class="menu-item"><a href="">item1</a></li>
      <li class="menu-item"><a href="">item2</a></li>
      <li class="menu-item"><a href="">item3</a></li>
      <li class="menu-item"><a href="">item4</a></li>
      <li class="menu-item"><a href="">item5</a></li>
      <li class="menu-item">
       
        <ul class="sub-menu sub-ul">
          <li class="menu-item sub-li">
            
            <a href="">sub menu item</a>
            
          </li>
          <li class="menu-item sub-li">
            
            <a href="">sub menu item</a>
            
          </li>
          <li class="menu-item sub-li">
            
            <a href="">sub menu item</a>
            
          </li>
        </ul>
        
      </li>
      
       <li class="menu-item"><a href="">item4</a></li>
      <li class="menu-item">
        
        <ul class="sub-menu sub-ul">
          <li class="menu-item sub-li">
            
            <a href="">sub menu item</a>
            
          </li>
          <li class="menu-item sub-li">
            
            <a href="">sub menu item</a>
            
          </li>
          <li class="menu-item sub-li">
            
            <a href="">sub menu item</a>
            
          </li>
        </ul>
        
      </li>
    
    
     </ul>


    

推荐答案

我认为您需要首先考虑:我的UL是包裹行的行还是是包裹行的行?对于您的情况，我认为第一个是正确的.

I think you need to consider first: is my UL a row that wraps columns or is it a column that wraps rows?? In your case I think the first is true.

我所做的是删除flex-direction(我们只需要默认值)，所有大小限制类以及对其进行操作的javascript.

What I did was remove flex-direction (we just want the default), all the size restriction classes and the javascript manipulating them.

因为您想要一个max-height: 350px，所以我们需要保留该值.但是，您需要处理主要的ul溢出问题，因此(至少)添加overflow-y: auto，否则您的HTML文档中的其他元素会出现意外的溢出问题.

Because you want a max-height: 350px we need to keep that value. However, you need to deal with the the main ul overflowing, so add (at least) overflow-y: auto, otherwise you will get unexpected overflow issues with other elements in your HTML document.

最后将列的最小宽度作为flex-basis添加到您的'li'元素而不是javascript.

Finally add some minimal width for your columns as flex-basis to you 'li' elements instead of the javascript.

下面的代码按照预期的方式包装和溢出，而且完全在您的控制之下.

The below code wraps and overflows just as expected, moreover it is completely under your control.

剩下的就是让它看起来不错...

All that's left is making it look good...

干杯！

/* javascript removed */

/* debugging, so it's visible what's happening */
*::before,::after,* { outline: 1px dashed }

ul {
  background: red;
  display: inline-flex;
  flex-wrap: wrap;
  max-height: 350px; 
  overflow-x: hidden /* or whatever */;
  overflow-y: auto;
  padding: 1rem;
  justify-content: flex-start;
  align-items: flex-start;
}

li {
  flex: 1 1; /* allow shrink and grow */
  flex-basis: 150px; /* (or some) minimal required column width, will trigger flex overflow */ 
}

.sub-ul {
  background: none;
}

li {
  list-style: none;
  font-size: 46px;
}

.sub-li {
  font-size: 16px;
}

<ul class="sub-menu topul">
  <li class="menu-item"><a href="">item1</a></li>
  <li class="menu-item"><a href="">item2</a></li>
  <li class="menu-item"><a href="">item3</a></li>
  <li class="menu-item"><a href="">item4</a></li>
  <li class="menu-item"><a href="">item5</a></li>
  <li class="menu-item">
   
    <ul class="sub-menu sub-ul">
      <li class="menu-item sub-li">
        
        <a href="">sub menu item</a>
        
      </li>
      <li class="menu-item sub-li">
        
        <a href="">sub menu item</a>
        
      </li>
      <li class="menu-item sub-li">
        
        <a href="">sub menu item</a>
        
      </li>
    </ul>
    
  </li>
  
   <li class="menu-item"><a href="">item6</a></li>
  <li class="menu-item">
    
    <ul class="sub-menu sub-ul">
      <li class="menu-item sub-li">
        
        <a href="">sub menu item</a>
        
      </li>
      <li class="menu-item sub-li">
        
        <a href="">sub menu item</a>
        
      </li>
      <li class="menu-item sub-li">
        
        <a href="">sub menu item</a>
        
      </li>
    </ul>
    
  </li>


 </ul>

这篇关于为什么我的< ul>扩展宽度以覆盖所有< li&gt ;?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！