求助：如何实现图片居左文字居右布局？Flex布局显示异常

我想实现图片居左、文字位于图片右侧的布局，当前代码结构如下：

<div class="row color-accent-1">
      <ul style="display: flex; list-style-type: none;">
        <li style="flex-grow:1;">
            <img src="https://w1.pngwing.com/pngs/546/859/png-transparent-food-icon-delivery-icon-sushi-pizza-delivery-scooter-courier-food-delivery-text-thumbnail.png">
            <div class="content">
              <h2 class="title" style="font-size: 13px; letter-spacing: 1.1px;">
                FREE DELIVERY
              </h2>
              <p class="paragraph" style="font-size: 13px; letter-spacing: 1.1px;">
                On all UK orders over £50
              </p>
            </div>
          </li>
    </ul>
</div>

实际显示效果不符合预期，文字跑到了图片下方：

问题核心是<li>元素未设置弹性布局，内部元素默认垂直排列。修改<li>的样式即可实现目标布局：

<div class="row color-accent-1">
      <ul style="display: flex; list-style-type: none;">
        <!-- 给li添加flex布局，同时设置垂直居中与元素间距 -->
        <li style="flex-grow:1; display: flex; align-items: center; gap: 12px;">
            <!-- 给图片设置固定宽度，避免尺寸过大破坏布局 -->
            <img src="https://w1.pngwing.com/pngs/546/859/png-transparent-food-icon-delivery-icon-sushi-pizza-delivery-scooter-courier-food-delivery-text-thumbnail.png" style="width: 40px;">
            <div class="content">
              <h2 class="title" style="font-size: 13px; letter-spacing: 1.1px; margin: 0;">
                FREE DELIVERY
              </h2>
              <p class="paragraph" style="font-size: 13px; letter-spacing: 1.1px; margin: 4px 0 0 0;">
                On all UK orders over £50
              </p>
            </div>
          </li>
    </ul>
</div>

关键修改点：

• 给<li>添加display: flex，让内部元素横向排列
• 加align-items: center，让文字与图片垂直居中对齐
• 用gap: 12px（可自定义数值）给图片和文字增加间距
• 给图片设置固定宽度，防止图片尺寸过大撑满容器
• 移除标题和段落的默认外边距，消除多余垂直间距

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