html - 具有共享宽度的多个 html 对象

Question

我正在尝试生成两个文件的差异，输出是一个 html 文件。差异分组在框中，目前我正在使用 <ul>为此目的稍微改变了颜色。

我的目标是彩色框都具有相同的宽度，但它应该是仍然显示全部内容的最小可能值。当我让它们都采用尽可能小的宽度时，所有框都有不同的尺寸，这看起来非常糟糕，但我不希望它们不必要地拉伸(stretch)到我的 Content-div 的宽度。

这就是它目前的样子:

CSS 片段看起来像这样:
ul.inBox {background-color: #FEFEFE; list-style-type:none; padding-left: 1em; padding-right: 1.8em;

我的想法是将整个内容放入表格列中，以便该列具有最小宽度，并且所有 block 都使用该列内的最大可能宽度，但我想知道是否有人知道更好的解决方案。

Answer 1

这个演示对你有帮助吗..宽度完全取决于文本的宽度。随着文字数量的增加，宽度也会增加。检查Demo .

ul {
  padding:0; margin:5px;
  list-style:none;
  background:gold;
  display:table;
  width: auto;
  min-width: 25%; /*Added minimum width*/
  }

在 HTML 中，我根据这种情况放置了许多 ul。

 <ul>
  <li>Item 1</li>
  <li>Item 2</li>
  </ul>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

  <ul>
  <li>Item 1 ITem 2</li>
  <li>Item 2 can be more longer;   </li>
  </ul>
    <ul>
<li>Item 2 can be more longer; Item 2 can be more longer</li>
<li>Item 2</li>
     </ul>