html - 根据最宽的一个，为多个垂直元素设置相同的宽度

Question

我有一个包含多个元素的容器，这些元素具有最小宽度和一些左右填充，问题是需要它们居中并在一列中，每个元素在单独的行中，每个元素的内容不同，导致元素有不同的宽度，像这样

+--------- container ---------+
|child1 is too long|
|child2|
|child3 is long|
|child4|
+-----------------------------+

我怎样才能让它们都具有最大元素的宽度，同时保持最大宽度，即如果内容太长，它会分解到下一行，同时保持宽度。

下面附上一张截图，上面是现在的情况，下面是想要的结果

Answer 1

您可以用 display:inline-block 包裹元素元素，
并将该元素包装在 text-align:center 中元素，这样它就会居中:

.centered{ text-align:center; }

.wrapper{ 
  display: inline-block; 
  font: 24px Arial; 
  text-align: left;
}

.wrapper > div{
  border: 2px dashed pink;
  margin-bottom: 4px;
}

<div class='centered'>
  <div class='wrapper'>
    <div contenteditable>try typing here</div>
    <div contenteditable>aaaaa</div>
    <div contenteditable>aaaaa aaaaa</div>
    <div contenteditable>aa</div>
    <div contenteditable>aaaaaaaaa</div>
  </div>
</div>

内在 child 是block level 元素 ( <div> ) 这意味着它们将占据其父元素的整个宽度，其中父元素是 inline-block .这将导致父项与最宽的子项一样宽。