如何使用Fomantic UI为卡片添加右侧丝带标签？

问题根源 #

核心问题是HTML规范禁止<a>标签嵌套其他<a>标签，你当前代码里把丝带的<a class="ui right red ribbon label">直接放在了作为卡片的外层<a class="ui large fluid card">内部，浏览器会自动修正这个非法嵌套，导致卡片的DOM结构被打乱，最终破坏布局。

方案1：整卡可跳转（丝带无跳转） #

把丝带的<a>标签改为<div>，保留外层卡片的<a>标签，既符合HTML规范，又能让整个卡片作为跳转链接：

<a class="ui large fluid card" href="blahblah">
  <div class="ui right red ribbon label">Most coolest project</div>
  <div class="content">
    <div class="header">RL Stick-Shift Sim </div>
    <div class="meta">
      <span class="category">Summer 2023</span>
    </div>
    <div class="description">
      <p>Project description blah blah.</p>
    </div>
  </div>
  <div class="extra content">
    <div class="right floated author" >
      <img class="ui avatar image" src="/images/github-pfp.jpg" alt="GitHub profile picture"> myGithub (GitHub)
    </div>
  </div>
</a>

方案2：丝带和卡片都需跳转（或整卡跳转用事件绑定） #

如果丝带需要独立跳转，或者希望保持整卡跳转但不嵌套<a>，可以把外层卡片改为<div>，通过点击事件实现跳转，丝带保留<a>标签：

<div class="ui large fluid card" onclick="window.location.href='blahblah'" style="cursor: pointer;">
  <a class="ui right red ribbon label" href="ribbon-link-url">Most coolest project</a>
  <div class="content">
    <div class="header">RL Stick-Shift Sim </div>
    <div class="meta">
      <span class="category">Summer 2023</span>
    </div>
    <div class="description">
      <p>Project description blah blah.</p>
    </div>
  </div>
  <div class="extra content">
    <div class="right floated author" >
      <img class="ui avatar image" src="/images/github-pfp.jpg" alt="GitHub profile picture"> myGithub (GitHub)
    </div>
  </div>
</div>

补充说明 #

• 两种方案都能解决布局崩溃问题，选择哪种取决于你的跳转需求：如果丝带不需要单独跳转，方案1更简洁；如果丝带需要独立跳转，方案2更合适。
• Fomantic UI的ribbon样式可以直接应用在<div>标签上，不会影响显示效果。

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