我想要一个菜单​​栏,其中所有菜单项具有相同的宽度(与最宽的菜单项一样宽).菜单项的数量可以变化.如果有额外的空间,菜单应该在其容器中居中.

如果项目不适合一行,则项目可能会换行另一行,但它们仍应具有相同的宽度.像这样的东西：

|    [   short   ] [loooooooong] [  between  ]    |
|    [  wrapped  ]                                |

我可以用CSS做到这一点吗？

我尝试使用display：grid,但失败了：

.container { 
  border: 1px solid black;
  display:inline-block;
}

.menu { 
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(50px,-webkit-max-content));
  grid-template-columns: repeat(auto-fit,max-content));
  justify-content: center;
  grid-gap: 10px;
  
  background: #eee;
}

.item { 
  border: 1px solid #aaa;
  background: yellow;
  white-space: Nowrap;
}

<div>
  <h2>Two items</h2>
  
  <p>
    These should have equal widths (as wide as the widest one is) and be centered within the container.
  </p>
  
  <div>
    <div>Short</div>
    <div>Looooooooooong</div>
  </div>
  
  <p>
    They are centered all right,but don't have equal widths.
  </p>

  <h2>Three items</h2>
  
  <p>
    These three should also have same width with each other.
  </p>
  
  <div>
    <div>First item</div>
    <div>Second item</div>
    <div>Third</div>
  </div>

  <p>
    They are centered all right,but don't have equal widths.
  </p>
  
  <h2>So many items that they won't fit on one line</h2>

  <p>
    These should also have equal widths,but they should wrap to the next row. I don't care whether the second row is centered as long as the items are aligned with the row above.
  </p>
  
  <div>
    <div>First item</div>
    <div>Second item</div>
    <div>Third item,a longer one</div>
    <div>Fourth item</div>
    <div>Fifth item</div>
    <div>Sixth item</div>
    <div>Seventh item</div>
    <div>Eight item</div>
    <div>Ninth item</div>
    <div>Tenth item</div>
    <div>Item number 11</div>
    <div>Item number 12</div>
    <div>Item number 13</div>
    <div>Item number 14</div>
    <div>Item number 15</div>
    <div>Item number 16</div>
    <div>Item number 17</div>
    <div>Item number 18</div>
    <div>Item number 19</div>
    <div>Item number 20</div>
    <div>Item number 21</div>
    <div>Item number 22</div>
    <div>Item number 23</div>
  </div>
  <p>
    They have equal widths,but the width is the min width given in minmax and the content doesn't fit within the item.
  </p>
</div>

(CodePen中的相同内容：https://codepen.io/jarnoan/pen/gxrEpR)

问题Centered table-like layout with columns of equal widths using CSS?是类似的,但是按钮的数量是固定的,没有包装.

它不需要显示：grid.

你有没有尝试1fr 1fr 1fr(每个都代表整个的1个单一部分,在这种情况下,列)

其他人正在推荐flexBox,但css-grid理论上可以做任何flexBox但可以获得二维的额外好处(相比之下只有1 w / flexBox).此外,css-grid集成在浏览器级别,因此不依赖于任何框架.