为什么< ul> （具有绝对位置）在< li>内部（具有相对位置）自动尺寸？ [英] Why can't an <ul> (with absolute position) inside a <li> (with relative position) auto size?

问题描述

编辑：另请参阅以下我自己的答案（2016年）

see also my own answer below (2016)

例如：

<ul>
    <li class="first"><a href="#" title="">Home</a></li>
    <li><a href="#" title="">Chi siamo</a>
       <ul><li><a href="#" title="">item1</a></li><li><a href="#" title="">item2</a></li></ul>
    </li>
    <li><a href="#" title="">Novità</a></li>
    <li><a href="#" title="">Promozioni</a></li>
</ul>

然后设置样式：

/* level 1 Main menu ----------------------------------------- */

#main-menu > ul{ list-style:none; }

#main-menu > ul > li{
    float:left;
    display:block;
    position:relative;
    margin-left:1em;
}

#main-menu > ul > li.first{
    margin-left:0;
}


/* sub Main menu ----------------------------------------- */

#main-menu > ul > li ul {
    position: absolute;
    z-index:1000;
    display:none;
    left:0;
    top:28px;
}

#main-menu > ul > li:hover ul {
    display:inline-block;
}

#main-menu > ul > li ul li{
    float:left;
    display:block;
    list-style:none;
}

好。所以，我有显示水平的主菜单。我还希望子菜单显示水平。但是由于某些原因，ul框不会调整大小以达到li标签的总宽度，因此它保持垂直。父母ul没有这个问题。
我可以通过简单地为孩子ul添加适当的宽度来使其工作，但这不是我想要使用的方式。

ok. So, I've got the main menu that shows up horizontal. I also want the submenu to show horizontal. But for some reason, the ul box do not resize to reach the total li tags width, so it remains vertical. The parent ul do not suffer of this problem. I could make it work by simply adding a proper width to the child ul, but this is not the way I wanna use.

有什么想法吗？

推荐答案

有一件愚蠢的事情：在子菜单上，您可以通过简单地强制空格来将sumbenus强制为内部项目的宽度：请勿对内部项目进行包装。尽管您正在使用任何技术或布局，它仍然可以正常工作-主要的LI条目与显示：内联块或现代Flex布局// //对于子项，常规显示无/块或现代css3 fx解决方案 -没关系。一个原始的例子可能就是这样，在这种情况下，将flexbox和faxin / out fx用于subs（但是可以是更简单的no-flexbox或更旧的，这没关系）：

There's one stupid thing: on the submenus, you can force the sumbenus to the inner items width by simply forcing whitespace: no-wrap on the inner items. It works despite any technique or layout you are using -- main LI items with display: inline-block, or modern flex layouts // and for the subs, regular display none/block or modern css3 fx solutions -- it doesn't matter. A raw example can be just this, in this case using flexbox and fadein/out fx for subs (but could be anything more simple no-flexbox or older, it really doesn't matter):

.main-menu{ // ul
  display: flex;
  flex-wrap: nowrap;

  > li{
    display: inline-block;
    flex: 1;
    position: relative;

    &:hover{
      .sub-menu{
        visibility: visible;
        opacity: 1;
        transition: opacity 200ms linear;
      }
    }

    .sub-menu{
      display: inline-block;
      position: absolute;
      top: 50px;
      left:0;

      visibility: hidden;
      opacity: 0;
      transition: visibility 0s 200ms, opacity 200ms linear;

      li{
        a{
          white-space: nowrap; // <<< THIS IS THE KEY!
        }
      }
    } // sub-menu

  } // > li
}

这篇关于为什么< ul> （具有绝对位置）在< li>内部（具有相对位置）自动尺寸？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！