Loading [MathJax]/jax/input/TeX/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何将DT和dd的样式设计成同一行?

如何将DT和dd的样式设计成同一行?

提问于 2018-01-09 15:57:14
回答 2关注 0查看 1.3K

使用CSS:

代码语言:javascript
运行
AI代码解释
复制
<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在同一条线上?

回答 2

刺激

发布于 2018-01-10 01:28:34

有一个解决办法:

代码语言:javascript
运行
AI代码解释
复制
dl.inline dd {
  display: inline;
  margin: 0;
}
dl.inline dd:after{
  display: block;
  content: '';
}
dl.inline dt{
  display: inline-block;
  min-width: 100px;
}

已经为这个问题增加了基于弹性盒的解决方案:

代码语言:javascript
运行
AI代码解释
复制
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;
}

绵绵

发布于 2018-01-10 00:47:15

尝试下这个

代码语言:javascript
运行
AI代码解释
复制
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
}
代码语言:javascript
运行
AI代码解释
复制
<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>
和开发者交流更多问题细节吧,去 写回答
相关文章

相似问题

网站备案如何将企业变更成个人?

3640

如何将h5转成tflite?

11.4K

如何将Word的样式通过程序添加到样式库?

075

如何将样式设置为QListWidget中的ScrollBar?

11.8K

转换日期格式yyyy-mm-dd => dd-mm-yyyy [duplicate]?

2490
相关问答用户
新浪微博 | 高级总监擅长4个领域
某公司 | 程序员擅长1个领域
擅长2个领域
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档