HTML/CSS 相同的 div 长度

Question

我有 3 个 div(下面的示例):

<ul>
<div class="parent">
<li>
  <div>
    Lorem Ipsum is simply dummy
  </div>
</li>
</div>
<li>
<div class="parent">
  <div>
    Lorem Ipsum is simply dummy text of the printing and typesetting 
  </div>
</li>
</div>
</div>
</ul>

而且我希望它们都具有与最长的相同的宽度。最长的宽度应与其内的文本相同加上一些像素(f.e. + 15px)。文本将发生变化，因此宽度应该动态变化。显示必须是内联表。是否可以在 HTML/CSS 中做类似的事情？

Answer 1

是的，可以使用 HTML/CSS。这是代码片段。

.parent {
  display: inline-block;
  width: auto;
}
.parent div {
  border: 1px solid black;
  padding-right: 15px;
}

<div class="parent">
  <div>
    Lorem Ipsum is simply dummy
  </div>
  <div>
    Lorem Ipsum is simply dummy text of the printing and typesetting 
  </div>
  <div>
    Lorem Ipsum is simply dummy text of the print 
  </div>
</div>

按照下面的代码...

ul {
    display: inline-block;
}
ul li {
    list-style: none;
}
li div {
    border: 1px solid black;
    padding-right: 15px;
}