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

Question

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

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

如何使它们都具有最大元素的宽度，同时保持最大宽度，即如果内容太长，它会在保持宽度的同时分解到下一行。

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

标签： htmlcss

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>

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