Saya mencoba mendapatkan item daftar dengan tiga bagian data ditambahkan berdampingan. Inilah yang saya coba capai:

enter image description here

Saat ini daftar saya terlihat seperti di bawah ini dengan lingkaran tergencet.

enter image description here

//Rendering to DOM
<div className="Legend-Component col-3" align="center">
  {legendData.map((item, index) => (
     <ul key={index}>
        <li>
          <span>{item.name}</span>
          <span className={`${item.className[index]}`}></span>
          <span>{item.total}</span>
        </li>
     </ul>
   ))}
</div>
//CSS Style Sample
  .Legend-Component ul {
      list-style-type: none;
      margin: 1%;
      font-size: 12px;
  }
  .darkDot {
    height: 13px;
    width: 13px;
    background-color: #79242F;
    border-radius: 50%;
    border: 1px solid grey;
    margin: 0px 2px 0px 2px;
  }
0
pt2t 19 April 2020, 19:49

1 menjawab

Jawaban Terbaik

Karena Anda telah menentukan lebar dan tinggi, beri tahu cara merentang dengan menambahkan elemen tampilan ke dalamnya.

Kode di bawah ini menunjukkan salah satu kemungkinan

.darkDot {
    display: inline-block;
    width: 13px;
    height: 13px;
    background-color: #79242F;
    border-radius: 50%;
    border: 1px solid grey;
    margin: 0 2px;
}
1
Dharman 19 April 2020, 21:37