我有一個使用flex box的項目列表，我需要在動態內容周圍獲得一個圓形突出顯示，在這種情況下是由顯示的數字

{galleyCartsDet\[0\]。數量}

{galleyCartsDet\[1\]。數量}等等，這有css方法嗎

<div className='galley-carts'>
        <div class='flexCol floatRight'>
            <ul>
              <span><b>Galley Details</b></span> <br/>
              <li className='floatRight'>{galleyCartsDet[0].quantity} Full Cart</li><br/>
              <li className='floatRight'>{galleyCartsDet[1].quantity} Half Cart</li><br/>
              <li className='floatRight'>{galleyCartsDet[2].quantity} SMU</li><br/>
              <li className='floatRight'>{galleyCartsDet[3].quantity} Stowage</li>
            </ul>
        </div>
     </div>

我試過了

.carts_circle{
      border-radius: 10px;
      width: 10px;
      height: 10px;
      background: yellow; 
  }

但是似乎不起作用

<div className='galley-carts'>
        <div class='flexCol floatRight'>
            <ul>
              <span><b>Galley Details</b></span> <br/>
<li className='floatRight'><div classname="cart_circle">{galleyCartsDet[0].quantity}</div> Full Cart</li><br/>
              <li className='floatRight'><div classname="cart_circle">{galleyCartsDet[1].quantity}</div> Half Cart</li><br/>
              <li className='floatRight'><div classname="cart_circle">{galleyCartsDet[2].quantity}</div> SMU</li><br/>
              <li className='floatRight'><div classname="cart_circle">{galleyCartsDet[3].quantity}</div> Stowage</li>
            </ul>
        </div>
     </div>

如果我沒理解錯的話，你忘了& quots & quot在html中的類名中。我不知道你為什么用& quotClassName & quot而不是& quotclass & quot？也不要用& quot打破& quot& lt/br & gt；在李元素的最后。

要在li內容前面顯示一個圓，并使該圓內的數字居中，您應該添加:

display: inline-flex;
  justify-content: center;
  align-items: center;

所以html部分應該看起來像這樣:

<li class='floatRight'><div class="carts_circle">{galleyCartsDet[0].quantity}</div> Full Cart</li>

和它的css:

.carts_circle{
      border-radius: 50%; /* better to use 50% */
      width: 10px;
      height: 10px;
      background: yellow;
      display:inline-flex;
      justify-content: center;
      align-items: center;
}