Question

我正在尝试创建一个术语定义对的定义列表，每个对都存在于一条单独的行上。我已尝试制作dt和dd s display:inline，但之后我失去了对之间的换行符。我如何确保每一对都有一条线（而不是每个单独的术语/定义）？

示例：

<dl>
<dt>Term 1</dt><dd>Def 1</dd>
<dt>Term 2</dt><dd>Def 2</dd>
</dl>

得到以下特性：

Term 1 Def 1
Term 2 Def 2

使它们内联的CSS将是：

dt,dd{display:inline;}

得到以下特性：

Term 1 Def 1 Term 2 Def 2

...这不是我想要的（缺少对之间的换行符）。

Answer 1

试试这个：

dt, dd { float: left }
dt { clear:both }

如果你想在它们之间留出更多空间，请在dt dd添加margin-bottom ..

Answer 2

另一种解决方案：

dt:before {
  content: "";
  display: block;
}
dt, dd {
  display: inline;
}

Answer 3

我尝试了这些答案，最后我最终得到了https://azure.microsoft.com/en-us/documentation/articles/search-howto-connecting-azure-sql-database-to-azure-search-using-indexers-2015-02-28/。

我简化为：

  dl {    
    padding: 0.5em;
  }
  dt {
    float: left;
    clear: left;
    width: 100px;
    text-align: right;
    font-weight: bold;    
  }
  dt:after {
    content: ":";
  }
  dd {
    margin: 0 0 0 110px;        
  }

Answer 4

另一种解决方案是使用内联块和百分比宽度。只要dd + dt的组合宽度大于50％。

dt, dd {
  display: inline-block;
}

dt {
  width: 50%;
}

dd {
  min-width: 5%;
}

我发现这给了我更加一致的dd元素定位。

Answer 5

另一个简单的解决方案

dt {
    display: block;
    float: left;
    min-width: 100px;
}

https://jsbin.com/vumeyowana/edit?html,css,output

Answer 6

如果你有斑马＆＃34;将每个DT-DD对分开的背景或边框，这将很好地工作：

dt, dd { padding: 8px 6px; display: block;



}
dt {
    font-weight: 600;
    float: left;
    min-width: 50%;
    margin: 0 8px 0 0;
}
dd:nth-of-type(odd) {
    background: #eee;
}

} dt { font-weight: 600; float: left; min-width: 50%; margin: 0 8px 0 0; } dd:nth-of-type(odd) { background: #eee; }

这似乎将两个项目包装在一个灰色背景的行中。只要DT的垂直高度比DD小 - 通常就是这种情况。

尚未对浏览器进行过测试。

Answer 7

Andrey Fedoseev的答案在旧的android（股票浏览器4.3）中不起作用。

这适用于该浏览器以及我检查过的所有其他浏览器：

dt::before {
  content: "\A";
  white-space: pre-wrap;
  display: block;
  height: .5em;
}

dt, dd {
  display: inline;
  margin: 0;
}

<dl>
  <dt>AM</dt>
  <dd>Description for am that should span more than one line at narrow screen widths.</dd>
  <dt>PM</dt>
  <dd>this means afternoon.</dd>
</dl>

Answer 8

我希望能够创建一个内联对的列表，居中对齐。使用 dt:before { display; block} 对此效果很好，但是当从浏览器复制文本时，伪元素会被忽略，因此最终会像这样粘贴：

Term 1: Def 1Term 2: Def 2

这是一个小问题，但还有另一种方法documented at MDN：

<块引用>

WHATWG HTML 允许将每个名称-值组包装在 <dl> 元素中的 <div> 元素中。这在使用微数据或全局属性应用于整个组，或用于造型目的。

以下解决方案适用于此：

dt, dd {
  display: inline;
}

<dl>
  <div><dt>Term 1:</dt> <dd>Def 1</dd></div>
  <div><dt>Term 2:</dt> <dd>Def 2</dd></div>
</dl>

具有内联对的定义列表

8 个答案: