显示定义术语和内联描述 [英] Display definition term and description inline

问题描述

我为网页上的某些元素使用了定义列表，需要它们显示内联，例如：正常：

< def term>

        < def desc>

        < def desc>

我需要他们看起来像（注意多个DD的）：

strong>< def term> < def desc> < def desc>

< def term> < def desc> < def desc>

< def term> < def desc> < def desc>

我可以让他们在莫斯工作，使用浮动工作，但无论我试图，他们不会在IE中工作，我通常得到类似的东西：

< def term> < def desc> < def desc> < def desc> < def desc> < def desc> < def desc>

< def term>

< def term>

有人找到了这个问题的解决方案，我真的想避免在可能的情况下添加额外的标记，但是没有改变它们到一个无序的列表im out of ideas：（

提前感谢

解决方案

注意：您必须避免

$ b c $ c> dd，
dt {
display：inline;
margin：0;
}
dd：before {
content：''; / * space them * /
}
dt：before {/ *在< dt>之前插入换行符* /
content：\A;
空格：pre;
}
dt：first-child：before {/ * disable line break before the first< dt> * /
content：none;
}

如果您不需要支持IE8，请跳过第4条CSS规则， ： dt：not（：first-child）：before

结果应该是这样：（演示）

  DT DD DD 
 DT DD DD 
  

，您可以将第二条规则替换为：

  dd + dd：before {
 content：'，'; / *在定义之间添加逗号* / 
} 
 
 dt：after {
 content：'：'; 
} 
  

结果应该是这样：（演示）

  DT：DD，DD 
 DT：DD，DD 
  

I am using a definition list for some elements on the page and need them to display inline, e.g.: they normally look like:

<def term>
        <def desc>
        <def desc>

and I need them to look like (note the multiple DD's):

<def term> <def desc> <def desc>
<def term> <def desc> <def desc>
<def term> <def desc> <def desc>

I can get them to work fine using floats in moz but no matter what I try they will not work in IE, I typically get something like:

<def term> <def desc> <def desc> <def desc> <def desc> <def desc> <def desc>
<def term>
<def term>

Has anyone found a solution to this problem, I would really like to avoid adding extra markup where possible, but short of changing them to an unordered list im out of ideas :(

Thanks in advance

解决方案

Note: you have to avoid spaces between the DD elements for this work work correctly.

No need for hacks for IE8+:

dd,
dt{
    display: inline;
    margin: 0;
}
dd:before {
    content: ' '; /* space them */
}
dt:before { /* insert line break before <dt> */
    content:"\A";
    white-space:pre;
}
dt:first-child:before { /* disable line break before the first <dt> */
    content: none;
}

If you don't need to support IE8, skip the 4th CSS rule and just use this selector for the 3rd one: dt:not(:first-child):before

The result should be something like this: (demo)

DT DD DD
DT DD DD

If you want to be real cool, you can replace the 2nd rule with this:

dd + dd:before {
    content: ', '; /* add comma between definitions */
}

dt:after {
    content: ':';
}

The result should be something like this: (demo)

DT: DD, DD
DT: DD, DD

这篇关于显示定义术语和内联描述的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！