如何使复选标记粘在文本的开头？顺风

Question

我有一些段落，我想使用 React Icon 组件在它前面打勾：

function HeadingBulletPoint(props) {
  return (
    <div className="mb-2 text-gray-500 font-medium flex">
      <GoCheck className="text-2xl mr-1"/><p className="">{props.children}</p>
    </div>
  );
}

在此示例中，{props.children} 是“blah blah blah”。

结果是这样的：

但我不希望复选标记粘在左侧，我希望它们粘在文本上，如下所示：

我该怎么做？我一直在玩各种 flex 属性，但我似乎无法让它工作...

编辑：here 是 Tailwind Playground 上的交互式示例。同样，我想在文本旁边加上复选标记（本例中的红色“v”），如上面的深色图片所示。灰色边框只是为了清楚起见。

Answer 1

在GoCheck组件上可以使用style={{position: 'absolute'}}它会把它从相对定位中取出来

Answer 2

我通过移动段落内的复选标记元素并将其设置为内联块来修复它：

function HeadingBulletPoint(props) {
  return (
    <div className="mb-2 text-gray-500 font-medium flex text-center ">
      <p className=""><GoCheck className="text-2xl inline-block mr-2"/>{props.children}</p>
    </div>
  );
}

Answer 3

这里的问题是复选标记和文本是两个块级元素，在这种情况下，再多的“弯曲”也无法使它们并排移动：

不过，您可以做的是通过使用 <span> 使复选标记成为内联级元素。这是 example.

在 React 应用程序的上下文中，您可以执行以下操作：

export default function GoCheck() {
  return <span>✔️</span>;
}

并像这样使用它：


import GoCheck from './GoCheck';

export default function HeadingBulletPoint(props) {
  return (
    <div className="mb-2 text-gray-500 font-medium flex">
      <p className="text-center">
        <GoCheck/>
        {props.children}
      </p>
    </div>
  );
}

那么如果封闭元素是（从您的 Tailwind playground 复制样式）：

      <div className="mt-8 flex flex-col justify-center items-center max-w-xs">
        <HeadingBulletPoint>blah blah blah</HeadingBulletPoint>
        <HeadingBulletPoint>blah blah blah blah blah</HeadingBulletPoint>
        <HeadingBulletPoint>blah blah blah</HeadingBulletPoint>
        <HeadingBulletPoint>blah blah blah blah blah</HeadingBulletPoint>
        <HeadingBulletPoint>blah blah</HeadingBulletPoint>
        <HeadingBulletPoint>blah blah blah</HeadingBulletPoint>
        <HeadingBulletPoint>blah</HeadingBulletPoint>
        <HeadingBulletPoint>blah blah blah blah blah blah</HeadingBulletPoint>
      </div>

它应该像这样呈现：

如何使复选标记粘在文本的开头？顺风

How to make checkmark stick to start of text? Tailwind

html

css

reactjs

tailwind-css