如何设置dt和dd的样式以便它们在同一条线上？

时间：2009-11-11 04:39:23

标签： html css

使用CSS，我如何设置以下样式：

<dl>
    <dt>Mercury</dt>
    <dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
    <dt>Venus</dt>
    <dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
    <dt>Earth</dt>
    <dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd>
</dl>

所以dt的内容会显示在一列中，而dd的内容会显示在另一列中，每个dt和相应的dd位于同一行？即产生看起来像的东西：

table format

20 个答案:

答案 0 :(得分：130)

dl {
  width: 100%;
  overflow: hidden;
  background: #ff0;
  padding: 0;
  margin: 0
}
dt {
  float: left;
  width: 50%;
  /* adjust the width; make sure the total of both is 100% */
  background: #cc0;
  padding: 0;
  margin: 0
}
dd {
  float: left;
  width: 50%;
  /* adjust the width; make sure the total of both is 100% */
  background: #dd0
  padding: 0;
  margin: 0
}
<dl>
  <dt>Mercury</dt>
  <dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
  <dt>Venus</dt>
  <dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
  <dt>Earth</dt>
  <dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd>
</dl>

答案 1 :(得分：110)

我有一个没有使用花车的解决方案！
点击 codepen

即。

dl.inline dd {
  display: inline;
  margin: 0;
}
dl.inline dd:after{
  display: block;
  content: '';
}
dl.inline dt{
  display: inline-block;
  min-width: 100px;
}



更新 - 3 rd 2017年1月：我已经为此问题添加了基于flex-box的解决方案。检查链接的 codepen ＆amp;根据需要改进它。谢谢！

dl.inline-flex {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  width: 300px;      /* set the container width*/
  overflow: visible;
}
dl.inline-flex dt {
  flex: 0 0 50%;
  text-overflow: ellipsis;
  overflow: hidden;
}
dl.inline-flex dd {
  flex:0 0 50%;
  margin-left: auto;
  text-align: left;
  text-overflow: ellipsis;
  overflow: hidden;
}

答案 2 :(得分：55)

如果您使用Bootstrap 3（或更早版本）...... 

<dl class="dl-horizontal">
    <dt>Label:</dt>
    <dd>
      Description of planet
    </dd>
    <dt>Label2:</dt>
    <dd>
      Description of planet
    </dd>
</dl>

答案 3 :(得分：21)

CSS网格布局

  

与表格一样，网格布局使作者能够将元素对齐到列和行中    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

要更改列大小，请查看grid-template-columns属性。

＆＃13;
＆＃13; 
dl {
  display: grid;
  grid-template-columns: max-content auto;
}

dt {
  grid-column-start: 1;
}

dd {
  grid-column-start: 2;
}
＆＃13; 
<dl>
  <dt>Mercury</dt>
  <dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
  <dt>Venus</dt>
  <dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
  <dt>Earth</dt>
  <dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd>
</dl>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：20)

假设您知道边距的宽度：

dt { float: left; width: 100px; }
dd { margin-left: 100px; }

答案 5 :(得分：8)

因为我还没有看到适用于我的用例的示例，所以这是我能够实现的最全面的解决方案。

＆＃13;
＆＃13; 
dd {
    margin: 0;
}
dd::after {
    content: '\A';
    white-space: pre-line;
}
dd:last-of-type::after {
    content: '';
}
dd, dt {
    display: inline;
}
dd, dt, .address {
    vertical-align: middle;
}
dt {
    font-weight: bolder;
}
dt::after {
    content: ': ';
}
.address {
    display: inline-block;
    white-space: pre;
}
＆＃13; 
Surrounding

<dl>
  <dt>Phone Number</dt>
  <dd>+1 (800) 555-1234</dd>
  <dt>Email Address</dt>
  <dd><a href="#">example@example.com</a></dd>
  <dt>Postal Address</dt>
  <dd><div class="address">123 FAKE ST<br />EXAMPLE EX  00000</div></dd>
</dl>

Text
＆＃13;
＆＃13;
＆＃13;

奇怪的是，它不能与display: inline-block一起使用。我想如果你需要设置任何dt元素或dd元素的大小，你可以将dl的显示设置为display: flexbox; display: -webkit-flex; display: flex;和flex元素的dd简写和dt元素的缩写为flex: 1 1 50%和display display: inline-block。但是我还没有对此进行过测试，所以谨慎行事。

答案 6 :(得分：6)

jsFiddle Screenshot

请参阅jsFiddle demo

我需要一个完全按照项目描述的列表，该项目显示公司的员工，左边是他们的照片，右边是信息。我设法在每DD之后使用psuedo-elements完成清算：

.myList dd:after {
  content: '';
  display: table;
  clear: both;
}

此外，我希望文本只显示在图像的右侧，而不包裹在浮动图像下（伪列效果）。这可以通过在DIV标记的内容周围添加overflow: hidden;元素和CSS DD来实现。您可以省略此额外DIV，但DD标记的内容将包含在已浮动的DT下。

在玩了一段时间之后，我能够支持每个DT多个DD个元素，而不是每个DD多个DT个元素。我尝试添加另一个可选类，仅在最后DD之后清除，但后续的DD元素包含在DT元素下（不是我想要的效果...我想要DT和要构成列的DD个元素，并且额外的DD元素太宽了。

除了所有权利，这应该只适用于IE8 +，但由于IE7中的怪癖，它也适用于那里。

答案 7 :(得分：5)

我需要执行此操作，并使<dt>内容相对于<dd>内容垂直居中。我使用display: inline-block和vertical-align: middle

See full example on Codepen here 

.dl-horizontal {
  font-size: 0;
  text-align: center;

  dt, dd {
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    width: calc(50% - 10px);
  }

  dt {
    text-align: right;
    padding-right: 10px;
  }

  dd {
    font-size: 18px;
    text-align: left;
    padding-left: 10px;
  } 
}

答案 8 :(得分：4)

这是另一个选项，它通过显示dt和dd内联然后在dd之后添加换行符来工作。 

dt, dd {
 display: inline;
}
dd:after {
 content:"\a";
 white-space: pre;
}

这类似于上面的Navaneeth的解决方案，但是使用这种方法，内容不会像在表格中一样排队，但dd将在每一行上立即跟随dt而不管长度如何。

答案 9 :(得分：3)

根据您对dt和dd元素进行样式设置的方式，您可能会遇到一个问题：使它们具有相同的高度。例如，如果你想在这些元素的底部有一些可见的边框，你很可能想要在相同的高度显示边框，就像在表格中一样。

对此的一个解决方案是作弊并使每一行成为“dl”元素。 （这相当于在表格中使用tr） 我们放弃了定义列表的原始兴趣，但是在对应物上，这是一种简单的方式来获得快速且漂亮的伪表格。

CSS：

dl {
 margin:0;
 padding:0;
 clear:both;
 overflow:hidden;
}
dt {
 margin:0;
 padding:0;
 float:left;
 width:28%;
 list-style-type:bullet;
}
dd {
 margin:0;
 padding:0;
 float:right;
 width:72%;
}

.huitCinqPts dl dt, .huitCinqPts dl dd {font-size:11.3px;}
.bord_inf_gc dl {padding-top:0.23em;padding-bottom:0.5em;border-bottom:1px solid #aaa;}

HTML：

<div class="huitCinqPts bord_inf_gc">
  <dl><dt>Term1</dt><dd>Definition1</dd></dl>
  <dl><dt>Term2</dt><dd>Definition2</dd></dl>
</div>

答案 10 :(得分：3)

我找到了一个对我来说似乎很完美的解决方案，但它需要额外的<div>个标签。 事实证明，没有必要使用<table>标记在表格中对齐，只需使用display:table-row;和display:table-cell;样式：

<style type="text/css">
dl > div {
  display: table-row;
}
dl > div > dt {
  display: table-cell;
  background: #ff0;
}
dl > div > dd {
  display: table-cell;
  padding-left: 1em;
  background: #0ff;
}
</style>

<dl>
  <div>
    <dt>Mercury</dt>
    <dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
  </div>
  <div>
    <dt>Venus</dt>
    <dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
  </div>
  <div>
    <dt>Earth</dt>
    <dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd>
  </div>
</dl>

答案 11 :(得分：2)

我最近需要混合内联和非内联dt / dd对，方法是在dl-inline元素上指定应该跟有内联<dt>元素的类<dd>。

dt.dl-inline {
  display: inline;
}
dt.dl-inline:before {
  content:"";
  display:block;
}
dt.dl-inline + dd {
  display: inline;
  margin-left: 0.5em;
  clear:right;
}
<dl>
    <dt>The first term.</dt>
    <dd>Definition of the first term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd>
    <dt class="dl-inline">The second term.</dt>
    <dd>Definition of the second term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd>
    <dt class="dl-inline">The third term.</dt>
    <dd>Definition of the third term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd>
    <dt>The fourth term</dt>
    <dd>Definition of the fourth term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd>
</dl

>

答案 12 :(得分：1)

这适用于IE7 +，符合标准，并允许不同的高度。

<style>
dt {
    float: left;
    clear: left;
    width: 100px;        
    padding: 5px 0;
    margin:0;
}
dd {
    float: left;
    width: 200px;
    padding: 5px 0;
    margin:0;
}
.cf:after {
    content:'';
    display:table;
    clear:both;
}
</style>

<dl class="cf">
    <dt>A</dt>
    <dd>Apple</dd>
    <dt>B</dt>
    <dd>Banana<br>Bread<br>Bun</dd>
    <dt>C</dt>
    <dd>Cinnamon</dd>
</dl>

See the JSFiddle

答案 13 :(得分：1)

这可以将它们显示为带有边框的表格，它应该以3em的宽度响应第一列。自动换行只会打破比列更宽的单词

 dl { display:block;
      border:2px solid black;
      margin: 1em;}  
 dt { display:inline-block;
      width:3em;
      word-wrap:break-word;} 
 dd { margin-left:0;
      display:inline;
      vertical-align:top;
      line-height:1.3;} 
 dd:after { content:'';display:block; }

<table>与<dl>的比较：

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>
<style>

dl { display:block;border:2px outset black;margin:1em; line-height:18px;}  
dt { display:inline-block;width:3em; word-wrap:break-word;} 

dd { margin-left:0; display:inline; vertical-align:top; line-height:1.3;} 
dd:after { content:'';display:block; } 


.glosstable { border:2px outset #aaaaaa;margin:1em; text-align:left}  
.glosstable, table, tbody,  tr,  td, dl, dt {font-size:100%; line-height:18px;}

.glossaz { font-size:140%;padding-left:2em;font-weight:bold;color: #00838c; } 
td.first {width: 2.5em;} 
</style>
<body>
Table<br>
<table class="glosstable">
  <tr><td class="first">Milk</td>
  <td class="glossdata">Black hot drink</td>
</tr>
  <tr><td class="first">Coffee2</td>
  <td class="glossdata">Black hot drink</td>
</tr>
  <tr><td>Warm milk</td>
  <td class="glossdata">White hot drink</td>
</tr>
</table>
DL list <br>
<dl class="glosstablep">
  <dt>Milk</dt>
  <dd class="glossdata">White cold drink</dd>
  <dt>Coffee2</dt>
  <dd class="glossdata">Black cold drink</dd>
  <dt>Warm Milk</dt>
  <dd class="glossdata">White hot drink</dd>
</dl>

</body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 14 :(得分：1)

就我而言，我只想在每个 dd 元素后换行。

例如，我想设计这样的样式：

<dl class="p">
  <dt>Created</dt> <dd><time>2021-02-03T14:23:43.073Z</time></dd>
  <dt>Updated</dt> <dd><time>2021-02-03T14:44:15.929Z</time></dd>
</p>

喜欢这个的默认样式：

<p>
  <span>Created</span> <time>2021-02-03T14:23:43.073Z</time><br>
  <span>Updated</span> <time>2021-02-03T14:44:15.929Z</time>
</p>

看起来像这样：

<块引用>

创建于 2021-02-03T14:23:43.073Z
更新 2021-02-03T14:44:15.929Z

为此我使用了这个 CSS：

dl.p > dt {
  display: inline;
}

dl.p > dd {
  display: inline;
  margin: 0;
}

dl.p > dd::after {
  content: "\A";
  white-space: pre;
}

或者你可以使用这个 CSS：

dl.p > dt {
  float: left;
  margin-inline-end: 0.26em;
}

dl.p > dd {
  margin: 0;
}

我还在此 CSS 的每个 dt 元素后添加了一个冒号：

dl.p > dt::after {
  content: ":";
}

答案 15 :(得分：0)

当样式定义列表为表格时，我通常从以下开始：

dt,
dd{
    /* Override browser defaults */
    display: inline;
    margin: 0;
}

dt  {
    clear:left;
    float:left;
    line-height:1; /* Adjust this value as you see fit */
    width:33%; /* 1/3 the width of the parent. Adjust this value as you see fit */
}

dd {
    clear:right;
    float: right;
    line-height:1; /* Adjust this value as you see fit */
    width:67%; /* 2/3 the width of the parent. Adjust this value as you see fit */
}

答案 16 :(得分：0)

这是一种可能的基于 flex 的解决方案（SCSS）：

dl {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  dt {
    width: 150px;
  }
  dd {
    margin: 0;
    flex: 1 0 calc(100% - 150px);
  }
}

适用于以下HTML（pug）

dl
  dt item 1
  dd desc 1
  dt item 2
  dd desc 2

答案 17 :(得分：0)

您可以使用CSS网格：

dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
<dl>
<dt>Title 1</dt>
<dd>Description 1</dd>
<dt>Title 2</dt>
<dd>Description 2</dd>
<dt>Title 3</dt>
<dd>Description 3</dd>
<dt>Title 4</dt>
<dd>Description 4</dd>
<dt>Title 5</dt>
<dd>Description 5</dd>
</dl>

答案 18 :(得分：0)

我有一个非常相似的问题。我希望定义在同一行上，但前提是术语没有超出其起始位置。在那种情况下，我希望它在一条新线上。经过多次反复试验，我找到了一个使用浮点数非常简单的解决方案。

<html>
    <style>
        dl.definitions, dl.definitions dt, dl.definitions dd {
            display: block;
        }
        dl.definitions dt {
            float: left;
            clear: right;
            margin-inline-end: 2ch;
        }
        dl.definitions dd {
            float: right;
            margin-inline-start: unset;
            --definition-indent: 15ch;
            width: calc(100% - var(--definition-indent));
        }
    </style>

    <dl class="definitions">
        <dt> kjsfjk
        <dt> kjsfjk
        <dd>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis aute irure dolor in reprehenderit in voluptate velit
            esse cillum dolore eu fugiat nulla pariatur. Excepteur
            sint occaecat cupidatat non proident, sunt in culpa qui
            officia deserunt mollit anim id est laborum.
        <dt> kjsfjks sdf g fg dgf saf asf asf asdg ag
        <dd>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis aute irure dolor in reprehenderit in voluptate velit
            esse cillum dolore eu fugiat nulla pariatur. Excepteur
            sint occaecat cupidatat non proident, sunt in culpa qui
            officia deserunt mollit anim id est laborum.
        <dd> Lorem ipsum dolor sit amet, consectetur adipiscing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        <dd> Lorem ipsum dolor sit amet, consectetur adipiscing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        <dt> kjsfjks
        <dt> kjsfjks
        <dt> kjsfjks
        <dd>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        <dd> 
            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </dl>
</html>

答案 19 :(得分：-8)

此处建议的大多数人都可以使用，但是您应该只将通用代码放入样式表中，并将特定代码放入html代码中，如下所示。否则你最终会得到一张臃肿的样式表。

以下是我的工作方式：

您的样式表代码： 

<style>
    dt {
        float:left;
    }
    dd {
        border-left:2px dotted #aaa;
        padding-left: 1em;
        margin: .5em;
    }   
</style>

您的HTML代码： 

<dl>
    <dt>1st Entity</dt>
    <dd style="margin-left: 5em;">Consumer</dd>
    <dt>2nd Entity</dt>
    <dd style="margin-left: 5em;">Merchant</dd>
    <dt>3rd Entity</dt>
    <dd style="margin-left: 5em;">Provider, or cToken direct to Merchant</dd>
    <dt>4th Entity</dt>
    <dd style="margin-left: 5em;">cToken to Provider</dd>
</dl>

Looks like this

相关问题
最新问题