我目前有这个:
我想将图标 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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
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; }