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

Posted 2023-03-07

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

【英文标题】：How to make checkmark stick to start of text? Tailwind

【发布时间】：2021-12-30 03:24:16

【问题描述】：

我有一些段落，我想使用 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”），如上图所示。灰色边框只是为了清楚起见。

【问题讨论】：

你能提供一个完整的可重现的例子吗？

@tromgy 现在用交互式示例更新了帖子。

【参考方案1】：

在 GoCheck 组件上，您可以使用 style=position: 'absolute' 将其移出相对定位。

【讨论】：

谢谢，但现在复选标记在其他文本中。在内容文本上留出一个边距使其行为与以前非常相似。

你能分享你的代码吗？您必须在与 blahblah 相同的单独行中呈现每个复选标记。顺便说一句，它是 style=position: 'absolute' 抱歉

看看主帖链接的交互式示例。

我刚刚想通了，不过还是感谢您的帮助！如果您想看看我是如何解决的，我刚刚发布了答案

【参考方案2】：

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

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

【讨论】：

你想通了?

【参考方案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 游乐场复制样式）：

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

它应该像这样呈现：

【讨论】：

感谢您的详尽解释！