Question

我正在尝试创建一个定义列表（在this guide的帮助下），其dt和dd元素具有不同的内容。当然，我可以对这些元素的宽度进行硬编码，但是我希望列表采用最长的dt元素并使其兄弟长度具有其长度。此外，当dd元素的内容长于可用空间时，新行不得在dt元素下方开始，而是在dd元素开始的位置，如第二个屏幕截图所示this question

我认为我可以使用display: flex属性来解决这个问题，但却坚持使用非工作解决方案。是不可能还是错误的方式？

以下是我到目前为止(fiddle)：

HTML：

<dl>
   <dt>dt: Lorem Ipsum</dt>
   <dd>dd: Lorem imperdiet</dd>
   <dt>dt: Lorem id libero in Ipsum and so on and so on</dt>
   <dd>dd: Lorem id libero in ipsum dolor</dd>
   <dt>dt: Lorem Ipsum</dt>
   <dd>dd: I should be sitting to the right of the previous dt and not wrapping round below it.</dd>
   <dt>dt: Lorem id libero in Ipsum</dt>
   <dd>dd: Lorem in ipsum dolor</dd>
</dl>

CSS：

dl {
   display: flex;
   flex-flow: column nowrap;
}
dt {
   background: gold;
   display: flex;
   flex-flow: row wrap;
}
dd {
   background: yellowgreen;
   display: flex;
   flex-flow: row wrap;
   width: auto;
   margin: 0;
   padding: 0;
}

Answer 1

我认为不可能归档您正在尝试的内容。在这种情况下，Flexbox无济于事。您也无法使用显示表等，因为遗憾的是dl语法缺少dt+dd组的包装。您必须使用JS来计算dt元素的宽度，但由于多行变体，它也不会那么容易。

但是这有点修改了“传统”方法：让它们达到最小宽度，但允许dt溢出到dd。

dl:after {
  content: '';
  display: block;
  clear: both;
}
dt {
  float: left;
  clear: left;
  padding-top: 1em;
  margin-right: 1em;
}
dd {
  padding-top: 1em;
  margin-left: 15em;
}

http://codepen.io/ThiemelJiri/pen/KrZrxG

Answer 2

我参加了DL：

https://jsfiddle.net/luminancedesign/0u0n39b9/

用途：在/之后用于背景条纹的块 - 最好使用纯色以避免“内联”形状轮廓，例如

dt:nth-of-type(even) {background: silver;}
dd:nth-of-type(odd) {background: slategrey;}

和：

dt:nth-of-type(even)::after {... background: darkgrey;}
dd:nth-of-type(odd)::before {... background: lightslategrey;}

我使用了宽度限制，以保持显示器的一些“美感” - 不规则的块不能使读数清晰。然而，这导致了单元格数据布局，如上所述，表格可能更合适。

如何使用可变长度的均衡定义术语创建定义列表？

2 个答案: