Question

我试图弄清楚如何设置定义列表的样式，以便描述与该术语在同一行上，只有它适合。

考虑以下DL列表：

<dl>
<dt>BeOS</dt>
<dd>Developed by Be Inc. in 1991. The open-source Haiku is a reimplentation of BeOS.</dd>
<dt>Apple ][e ProDOS</dt>
<dd>Marketed by Apple as "Professional Disk Operating System", and was the last OS used by Apple II computers.</dd>
<dt>z/OS</dt>
<dd>IBM's latest successor to the vernable MVS, for zSeries mainframes</dd>
<dt>Commodore AmigaOS</dt>
<dd>The native operating system for Amiga computers.
</dl>

假设我们希望dd列缩进为5em。样式结果应为：

BeOS        Developed by Be Inc. in 1991. The open-source Haiku is a 
            reimplentation of BeOS.

Apple ][e ProDOS
            Marketed by Apple as "Professional Disk Operating System", and
            was the last OS used by Apple II computers.

z/OS        IBM's latest successor to the vernable MVS, for zSeries
            mainframes.

Commodore AmigaOS
            The native operating system for Amiga computers.

关键是，当术语长于dd边距时，dd块会出现在下一行，就像没有特殊CSS一样。但如果确实合适，则出现在同一行。

我已经弄清楚如何让它始终打破，从不打破，但我无法看到如何让它有条件地破坏，并且仍然保持dd块的一致缩进。

更新：按要求，一些CSS ......对于总是内联的情况，我想出了：

dt {
    font-weight: bold;
    float: left;
    clear: left;
    min-width:calc(5em-1ch);
    margin-right:1ch;
}                  
dd {
    margin-left:5em;
    margin-bottom:1em;
}

这与其他发布的解决方案不同，因为我希望dd能够包围该术语，但无论术语长度如何都保持对齐。

对于条件中断问题，我能得到的最接近的是将dd作为浮动的块：

dl {overflow:auto;}
dt {
    font-weight: bold;
    float: left;
    clear: left;
}
dd {
    float: left;
    margin-left: 5em;
    margin-bottom:1em;
}

但问题是dd块的缩进。当它不适合时，它应该缩进。但是当它确实适合时，边距会导致整个块缩进太多。如果我试图给它一个相对位置，也会出现类似的问题。

样式定义列表有条件地中断

0 个答案: