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

当前回答

以下是一个基于弹性的解决方案(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

2020-08-11 23:54:37

其他回答

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，然后在dd后面添加换行符。

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

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

2014-06-01 18:57:15

当将定义列表样式化为表时，我通常从以下开始:

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 */
}

2018-04-09 20:02:55

这适用于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>

请参阅JSFiddle。

2014-07-01 23:39:54

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

<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，使他们在同一行?

推荐文章

最新文章

标签