在父宽度和最大宽度之间设置一个孩子的宽度 [英] Set a child's width between parent's width and max-width

问题描述

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

1. 父母的高度和宽度< div> 未知


2. < li> 的数量未知


3. < ul> 必须不小于< div> width


4. 一行< li> 必须包含尽可能多的< li> max-width < ul>

我想要的：

<问题是：实际上< ul> 过多地考虑了初始宽度，并且没有展开。如果您点击运行代码段，您将看到它。

HTML可以更改;弯曲和技巧是受欢迎的; JS不受欢迎; IE10支持是必需的。

div {background：yellow;显示：inline-block; padding：20px 30px; position：relative;} ul {background：lightblue;左：0;保证金：0; max-width：450px;最小宽度：100％;填充：0;位置：绝对; top：100％;} li {background：orange;显示：inline-block; margin：2px; padding：20px 25px;}

< div> Stabat mater dolorosa< ul> <李→1< /锂> <李→2< /锂> <李→3< /锂> <李→4< /锂> < / div>< / div>

解决方案

是 div 的子项。

ul 绝对定位在 div 的边界内，因为 div 是最接近的定位祖先（ position：相对）

结果， ul 不能超过<$ c $的宽度c> div ，它被设置为 inline-block 。

所以 li 项目必须根据 div 和 max-width 的宽度进行换行。被忽略。

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

纯CSS和HTML 表元素可以满足您的所有需求。

$ b

tr：first-child td span {display：inline-block; padding：20px 30px;背景：黄色;} tr：最后一个孩子td {max-width：450px;} ul {margin：0;填充：0; list-style-type：none; background-color：lightblue;} li {background：orange;显示：inline-block; margin：2px; padding：20px 25px;}

< table> < TR> < td>< span> Stabat mater dolorosa< / span>< / td> < / TR> < TR> < TD> < UL> <李→1< /锂> <李→2< /锂> <李→3< /锂> <李→4< /锂> < / UL> < / TD> < / tr>< / table>

=https://jsfiddle.net/uhe37sqL/1/ =nofollow noreferrer> jsFiddle

1. 父母的高度和宽度< div> 未知无问题


2. < li> 的数量未知无问题


3. < ; ul> 必须不小于< div> width 是 li> < li> 的一行必须包含尽可能多的< li> c> max-width < ul> 是


4. 否JavaScript 是


5. 支持IE10 是

I want to build a CSS menu with some restrictions:

1. height and width of the parent <div> are unknown
2. the number of <li> is unknown
3. <ul> must be not smaller than <div> width
4. one row of <li> must contain as many <li> as possible with max-width of <ul>

What I want:

The problem is: actually <ul> respects initial width too much and doesn't expand. If you click 'Run the code snippet', you will see it.

HTML can be changed; flex and tricks are welcome; JS is not welcome; IE10 support is required.

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

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

解决方案

Here's the problem with your approach:

• The ul is a child of the div.
• The ul is absolutely positioned within the boundaries of the div, because the div is the nearest positioned ancestor (position: relative)
• As a result, the ul cannot extend past the width of the div, which is set to inline-block.
• So the li items must wrap based on the width of the div and the max-width is ignored.

I suggest you try a different method.

With pure CSS and HTML table elements all your requirements can be met.

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>

jsFiddle

1. height and width of the parent <div> are unknown NO PROBLEM
2. the number of <li> is unknown NO PROBLEM
3. <ul> must be not smaller than <div> width YES
4. one row of <li> must contain as many <li> as possible with max-width of <ul> YES
5. No JavaScript YES
6. IE10 support YES

这篇关于在父宽度和最大宽度之间设置一个孩子的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！