对齐列表列表中的项目

Question

我有一些像这样的HTML结构：

<ul>
<li>
  <h2>Item 1</h2>
  <dl>
    <div><dt>attr1</dt><dd>value a</dd></div>
    <div><dt>attr2</dt><dd>value b</dd></div>
    <div><dt>attr3</dt><dd>value c</dd></div>
  </dl>
</li>
<li>
  <h2>Item Another One Here</h2>
  <dl>
    <div><dt>attr1</dt><dd>value x</dd></div>
    <div><dt>attr2</dt><dd>value some bit long</dd></div>
    <div><dt>attr3</dt><dd>value z</dd></div>
  </dl>
</li>
</ul>

我希望它呈现为：

---------------------------------------------------------------------
  Item 1
  attr 1: value a  attr 2: value b              attr 3: value c
---------------------------------------------------------------------
  Item Another One Here
  attr 1: value x  attr 2: value some bit long  attr 3: value z
---------------------------------------------------------------------

属性根据其内容的长度彼此对齐。

我该怎么做？

我会避免将我的标记更改为<table>，因为它们不是真正的表格。我曾尝试使用display: table-*对它们进行布局，但这不适用于标题（应该取代整行而不是一个单元格）。

Answer 1

只需将显示内联块添加到您的所有值...

dl *{
display:inline-block;
}

<ul>
<li>
  <h2>Item 1</h2>
  <dl>
    <div><dt>attr1</dt><dd>value a</dd></div>
    <div><dt>attr2</dt><dd>value b</dd></div>
    <div><dt>attr3</dt><dd>value c</dd></div>
  </dl>
</li>
<li>
  <h2>Item Another One Here</h2>
  <dl>
    <div><dt>attr1</dt><dd>value x</dd></div>
    <div><dt>attr2</dt><dd>value some bit long</dd></div>
    <div><dt>attr3</dt><dd>value z</dd></div>
  </dl>
</li>
</ul>

Answer 2

使用CSS Grid Layout Module

可以进行此布局

.container {
  display: inline-grid;
  grid-column-gap: 1em;
  grid-template-columns: repeat(3,auto);
  padding: 0;
  background-color: white;
  padding-bottom: 0.5em;
  border-bottom: 2px dashed;
}

.container li, .container dl {
  display: contents;
}

h2 {
  grid-column: 1 / -1;
  font-size: inherit;
  padding: 0.5em 0 0 0;
  border-top: 2px dashed;
}


dl > div, dd, dt {
  display: inline-block;
  padding: 0;
  margin: 0;
}
dt:after {
  content: ':'
}
dd {
 margin-left: 0.5em;
}
dl > div:nth-child(1) {
  background-color: lightblue;
}
dl > div:nth-child(2) {
  background-color: lightgreen;
}
dl > div:nth-child(3) {
  background-color: pink;
}

<ul class="container">
  <li>
    <h2>Item 1</h2>
    <dl>
      <div><dt>attr1</dt>
        <dd>value a</dd>
      </div>
      <div><dt>attr2</dt>
        <dd>value b</dd>
      </div>
      <div><dt>attr3</dt>
        <dd>value c</dd>
      </div>
    </dl>
  </li>
  <li>
    <h2>Item 2 - Another One Here</h2>
    <dl>
      <div><dt>attr1</dt>
        <dd>value y -bla bla </dd>
      </div>
      <div><dt>attr2</dt>
        <dd>value some bit long</dd>
      </div>
      <div><dt>attr3</dt>
        <dd>value z</dd>
      </div>
    </dl>
  </li>
  <li>
    <h2>Item 3 - Another One Here</h2>
    <dl>
      <div><dt>attr1</dt>
        <dd>value x</dd>
      </div>
      <div><dt>attr2</dt>
        <dd>value some much longer</dd>
      </div>
      <div><dt>attr3</dt>
        <dd>value z - blabl bla</dd>
      </div>
    </dl>
  </li>
</ul>

（的 Codepen demo ）

此处的难点在于li和dl元素不是网格容器的直接子元素 - 您无法对其应用网格属性。

网格布局模块第2级 - Subgrids（目前是规范草案）应该可以解决这个问题，但与此同时我们可以使用display:contents来解决这个问题。

有关详细信息，请参阅this post。

如果您的标记开始时是平的，那么您将不需要display: contents并且CSS网格模块可以做到这一点：

Cross-browser demo (With 'flat' markup')

.container {
  display: inline-grid;
  grid-column-gap: 1em;
  grid-template-columns: repeat(3,auto);
  padding: 0;
  background-color: white;
  padding-bottom: 0.5em;
  border-bottom: 2px dashed;
}

h2 {
  grid-column: 1 / -1;
  font-size: inherit;
  padding: 0.5em 0 0 0;
  border-top: 2px dashed;
}

dl, dt, dd {
  display: inline-block;
  padding: 0;
  margin: 0;
}
dt:after {
  content: ':'
}
dd {
 margin-left: 0.5em;
}
dl:nth-of-type(3n + 1) {
  background-color: lightblue;
}
dl:nth-of-type(3n + 2) {
  background-color: lightgreen;
}
dl:nth-of-type(3n) {
  background-color: pink;
}

<div class="container">
  <h2>Item 1</h2>
    <dl><dt>attr1</dt><dd>value a</dd></dl>
    <dl><dt>attr2</dt><dd>value b</dd></dl>
    <dl><dt>attr3</dt><dd>value c</dd></dl>
  <h2>Item 2 - Another One Here</h2>
    <dl><dt>attr1</dt><dd>value x</dd></dl>
    <dl><dt>attr2</dt><dd>value some bit long</dd></dl>
    <dl><dt>attr3</dt><dd>value z</dd></dl>
  <h2>Item 3 - Another One Here</h2>
    <dl><dt>attr1</dt><dd>value x</dd></dl>
    <dl><dt>attr2</dt><dd>value some much much much longer</dd></dl>
    <dl><dt>attr3</dt><dd>value z</dd></dl>
</div>

<强> NB：

为了'收缩 - 包装'网格，我将display: inline-grid应用于网格容器。

Answer 3

我使用float来对齐项目

.f{
	float:left;
	margin:10px;
}

.c{
	clear:both;
}

<ul>
	<hr>
<li>
	
  <h2>Item 1</h2>
  <dl>
    <div class="f">attr1 value a</div>
<!-- 		<div class="c"></div> -->
    <div class="f">attr2 value b</div>
    <div class="f">attr3 value c</div>
  </dl>
	<div class="c"></div>
</li>
	<hr>
<li>
  <h2>Item Another One Here</h2>
   <dl>
    <div class="f">attr1 value a</div>
<!-- 		<div class="c"></div> -->
    <div class="f">attr2 value b</div>
    <div class="f">attr3 value c</div>
		 	<div class="c"></div>
  </dl>
</li>
	<hr>
</ul>