如何样式dt和dd，使他们在同一行?

使用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在同一行?即生产出看起来像这样的东西:

当前回答

我也遇到过类似的问题。我想让定义在同一行，但前提是这些项没有超过它的起始位置。在这种情况下，我希望它在新行上。经过多次试验和错误，我找到了一个解决方案，这是惊人的简单使用浮动。

<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>

2021-07-17 17:13:11

其他回答

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>

2009-11-11 04:44:03

我需要这样做，并让<dt>内容垂直居中，相对于<dd>内容。我使用display: inline-block和vertical-align: middle

在这里查看Codepen的完整示例

.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;
  } 
}

2015-07-16 14:05:55

我有一个解决方案，不使用浮标! 在codeen上检查这个

Viz.

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

更新- 2017年1月3日:我已经为这个问题添加了基于弹性盒的解决方案。在链接的代码依赖中检查并根据需要提炼它。

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;
}

2014-01-21 14:45:50

根据对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>

2010-12-22 22:37:16

<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>

2021-07-17 17:13:11

如何样式dt和dd，使他们在同一行?

推荐文章

最新文章

标签