"具有多个 dd 元素到 1 个 dt 元素的内联定义列表"

Question

Done some Googling and Stackoverflowing on this subject, but I haven't found quite what I'm looking for. I'm looking to use CSS to style a definition list that has multiple dd elements in an inline style. What I mean is I need this:

DT first definition term:         DD term 1-1 // DD term 1-2 // DD term 1-3
DT second definition term:        DD term 2-1
DT third definition term:         DD term 3-1 // DD term 3-2 // DD term 3-3 // DD term 3-4 // DD
                                  term 3-5
.
.
DT twenty-first definition term:  DD term 21-1 // DD term 21-2

Answer 1

Make <dd> inline-block and <dt> element inline. By default they are block element. Now insert line breaks via pseudo element on <dt>

 dt { display: inline; margin-right:20px; } dt::before { content: "\\A"; white-space: pre; } dd { display: inline; margin:0; }

 <dl> <dt>Buy from author::</dt> <dd>Black hot drink</dd> <dd>//White cold drink</dd> <dd>//White cold drink</dd> <dd>//Black hot drink</dd> <dd>//White cold drink</dd> <dd>//White cold drink</dd> <dd>//Black hot drink</dd> <dt>Milk:</dt> <dd>White cold drink</dd> <dt>Coffee:</dt> <dd>Black hot drink</dd> <dd>//White cold drink</dd> <dd>//White cold drink</dd> <dt>Milk:</dt> <dd>White cold drink</dd> <dd>//White cold drink</dd> </dl>

Answer 2

you can make use of blocks instead of line-breaks using a variation on the original answer.

Answer 3

The strucure described sounds alot like a row oriented table with the first column as the header and the rest of the columns are at amounts on each row.