在块换行符后显示一个元素-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

在块换行符后显示一个元素

P粉652495194 2024-04-04 21:45:21

[CSS3讨论组]

492

我目前有这个：

我想将图标 div 放在文本末尾，但因为它是一个“块”，所以我无法使其工作。

想要的输出：

代码片段：

* {
  font-family: Arial, 'sans-serif'
}

.test {
  display: flex;
}

.info {
  font-family: 'monospace';
  background: black;
  width: 18px;
  height: 18px;
  aspect-ratio: 1;
  text-align: center;
  border-radius: 50%;
  color: white;
}

<div class="test">
    Donec rutrum congue leo eget malesuada.     Donec sollicitudin molestie malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <div class="info">i</div>
</div>

P粉652495194

全部回复(1)

P粉7386761862024-04-05 20:34:40 1楼

从容器中删除 display: flex (.test)
将信息图标（.info）设置为 inline-block 并使用 display: inline-block

* {
  font-family: Arial, 'sans-serif'
}

.info {
  display: inline-block;
  font-family: 'monospace';
  background: black;
  width: 18px;
  height: 18px;
  aspect-ratio: 1;
  text-align: center;
  border-radius: 50%;
  color: white;
}


    Donec rutrum congue leo eget malesuada.     Donec sollicitudin molestie malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   i

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>