如何用CSS为Flex布局列表的动态数字添加圆形高亮背景？

我用Flex布局实现了一个列表，需要为其中动态渲染的数字（如{galleyCartsDet[0].quantity}、{galleyCartsDet[1].quantity}等）添加圆形高亮背景，但尝试的CSS代码未生效，相关代码如下：

初始HTML结构 #

<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>

尝试的CSS代码 #

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

修改后的HTML结构 #

<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>

正确实现方案 #

问题根源 #

1. 类名不匹配：CSS中定义的是.carts_circle，但HTML里写的是cart_circle（缺少末尾的s）
2. React属性错误：React中应使用className而非小写的classname
3. 样式设置不合理：原CSS宽高过小（10px）无法容纳数字，且固定border-radius值在宽高变化时无法保证圆形

修正后的HTML #

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

正确CSS代码 #

.carts_circle{
  /* 用50%实现自适应圆形 */
  border-radius: 50%;
  /* 调整宽高适配数字，可按需修改 */
  width: 24px;
  height: 24px;
  background-color: yellow;
  /* 让元素与文字同行 */
  display: inline-block;
  /* 使数字居中显示 */
  text-align: center;
  line-height: 24px;
  /* 与文字拉开间距，提升美观 */
  margin-right: 8px;
  /* 可选：加粗数字 */
  font-weight: bold;
}

内容的提问来源于stack exchange，提问作者rishzeta