Paparkan elemen selepas baris baharu blok
P粉652495194
P粉652495194 2024-04-04 21:45:21
0
1
368

Saya kini mempunyai ini:

Saya mahu meletakkan div ikon pada penghujung teks, tetapi kerana ia adalah "blok" saya tidak dapat membuatnya berfungsi.

Keluaran yang diingini:

Coretan kod:

* {
  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
P粉652495194

membalas semua(1)
P粉738676186
  1. Alih keluar dari bekas display: flex (.test)
  2. Tukar ikon maklumat (.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
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan