【问题标题】:How to style the li tag bullets (make them smaller) in with TailwindCSS,如何使用 TailwindCSS 设置 li 标签项目符号的样式(使它们更小),
【发布时间】:2022-01-10 18:43:19
【问题描述】:

真的很简单的问题,但我仍然一直在寻找很长时间才能找到解决方案,我需要将列表项目符号的样式设置为更小,并且在 Tailwind 中。先谢谢了???

【问题讨论】:

    标签: javascript html tailwind-css


    【解决方案1】:

    您可以使用以下 sn-p 。但是,您可以使用您在共享屏幕截图中使用的字体。

    <script src="https://cdn.tailwindcss.com"></script>
    <div>
        <h3 class="text-blue-400 font-bold">Key Discussion points</h3>
    <ul class="list-outside list-disc ml-6 text-indigo-900 font-medium">
        <li> Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sollicitudin convallis viverra.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sollicitudin convallis viverra.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sollicitudin convallis viverra.</li>
    <ul>
    </div>

    【讨论】:

      【解决方案2】:

      试试这个:

      li::marker {
        font-size: 16px;
      }
      

      参考

      https://developer.mozilla.org/en-US/docs/Web/CSS/::marker

      【讨论】:

      • 虽然这段代码 sn-p 可以解决问题,但它没有解释为什么或如何回答这个问题。请include an explanation for your code,因为这确实有助于提高您的帖子质量。请记住,您是在为将来的读者回答问题,而这些人可能不知道您提出代码建议的原因。
      猜你喜欢
      • 2020-08-10
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-02-24
      • 1970-01-01
      • 2022-01-19
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多