Question

所以，我有一个子菜单ul项，我需要将其展开到最宽的子width的自动li，而不指定实际的width }}。截至目前，子ul正在使用.mainlink的宽度和li项目内的文本开始折叠。我需要它在一行中并超越。必要时主链宽度。

我已经尝试了所有可能的display，但无法让它发挥作用。

＆＃13;

.mainnav {
  display: table;
  table-layout: fixed;
}
ul.mainnav li {
  display: table-cell;
}
.subnav {
  position: absolute;
  top: 40px;
}
.menuitem {
  position: relative;
  display: block;
}

＆＃13;

<ul class="mainnav">
  <li class="mainlink"><a href="">Link 11</a>
  </li>
  <li class="mainlink">
    <a href="">Link 12</a>
    <ul class="subnav">
      <li class="menuitem"><a href="">link 1</a>
      </li>
      <li class="menuitem"><a href="">link 2</a>
      </li>
    </ul>
  </li>
</ul>

＆＃13;

Answer 1

重置padding .subnav，因为ul默认为padding

更新（基于OP更新的问题）

在display:inline-block

中使用.mainnav > li

.mainnav {
  background:lightyellow;
  position:relative
}
ul.mainnav > li {
  display: inline-block;
  background:lightblue;
}
.subnav {
  position: absolute;
  top: 40px;
  padding: 0;
  border: 5px solid green
}
.menuitem {
  position: relative;
  display: block;
  background: red
}

<ul class="mainnav">
  <li class="mainlink"><a href=" ">Link 11</a></li>
   <li class="mainlink">
    <a href="">Link 12</a>
    <ul class="subnav">
      <li class="menuitem"><a href="">link 1</a>
      </li>
      <li class="menuitem"><a href="">link 2 long text</a>
      </li>
    </ul>
  </li>
</ul>

将绝对div展开为相对子自动宽度

1 个答案: