Question

我想构建一个带有一些限制的CSS菜单：

父<div>的高度和宽度未知
<li>的数量未知
<ul>必须不小于<div>宽度
<li>的一行必须包含尽可能多的<li> max-width <ul>

我想要的是什么：

问题是：实际上<ul>过多地尊重初始宽度并且不会扩展。如果您点击“运行代码段”，则会看到它。

可以更改HTML;欢迎flex和技巧; JS不受欢迎;需要IE10支持。

＆＃13;

div {
  background: yellow;
  display: inline-block;
  padding: 20px 30px;
  position: relative;
}

ul {
  background: lightblue;
  left: 0;
  margin: 0;
  max-width: 450px;
  min-width: 100%;
  padding: 0;
  position: absolute;
  top: 100%;
}

li {
  background: orange;
  display: inline-block;
  margin: 2px;
  padding: 20px 25px;
}

＆＃13;

<div>Stabat mater dolorosa
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>

＆＃13;

Answer 1

以下是您的方法存在的问题：

ul是div的孩子。
ul绝对位于div的边界内，因为div是最近的定位祖先（position: relative）
因此，ul无法延伸超过div的宽度，inline-block设置为li。
因此，div项必须根据max-width的宽度进行换行，并忽略table。

我建议您尝试不同的方法。

使用纯CSS和HTML tr:first-child td span { display: inline-block; padding: 20px 30px; background: yellow; } tr:last-child td { max-width: 450px; } ul { margin: 0; padding: 0; list-style-type: none; background-color: lightblue; } li { background: orange; display: inline-block; margin: 2px; padding: 20px 25px; }元素，您可以满足所有要求。

<table>
  <tr>
    <td><span>Stabat mater dolorosa</span></td>
  </tr>
  <tr>
    <td>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </td>
  </tr>
</table>

<div>

jsFiddle

父<li>的高度和宽度未知无问题

<ul>的数量未知无问题

<div>必须不小于<li>宽度是

<li>的一行必须包含尽可能多max-width <ul> dijit.form.Select 是

没有JavaScript 是

IE10支持是

在父级宽度和最大宽度

1 个答案:

jsFiddle