我已经完成了标签代码完美的反应，但我需要更改html结构

Question

我已经完成了标签代码的完美工作，但我需要更改html结构以匹配下面的代码。是否可以在<a>标记之后添加标签内容以维护我的html结构？

https://jsfiddle.net/9e767txs/9/

<div className="sports-tab-container">
  <ul>
    <li role="presentation" className="sports-setup-ico first-time-active ft-active-tab">
      <a href="javascript:;" className="sports-tab-header">
        <h2>sports player</h2>
        <p className="sports-subtitle">Days 1 and 2</p>
      </a>
      <div className="sports-tab-content">
        <p className="sports-large-text ft-day1 ft-day2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry</p>
      </div>
    </li>
    <li role="presentation" className="sports-invest-ico">
      <a href="javascript:;" className="sports-tab-header">
        <h2>car selling</h2>
        <p className="sports-subtitle">Approx. Day 3</p>
      </a>
      <div className="sports-tab-content">
        <p className="sports-large-text ft-day1 ft-day2">It is a long established fact that a reader will be distracted by the readable content of a page when </p>
      </div>
    </li>
  </ul>
</div>

Answer 1

只需更改一个小的CSS样式：

Live link

制作： display: Block to inline-block

.tabs__labels li {
  display: inline-block;
}