使用 HTML 水平而不是垂直显示 API 结果

Question

我正在构建一个专注于体育的 WordPress 网站，并且我正在使用体育 API 来获取来自不同联赛（篮球、足球等）的最新 10-15 个精彩视频。我已经能够获得该信息，问题在于数据是垂直显示的，而我希望尽可能用滑块/轮播水平显示它。

我一直在查看 Elementor（这是我用于 WordPress 的构建器页面）和一些教程，但我找不到任何有用的东西。

我有以下代码：

<center>
 [jsoncontentimporter url=API I AM USING]

  {subloop:results:-1}
    {subloop-array:results:-1}

    <a href="{results.strVideo}" target="_blank"><img src="{results.strThumb}" style="width:275px;height:125px;"></a>
    <br>
    <strong style="font-size: 10px;">{results.strHomeTeam}</strong>
    <strong style="font-size: 10px;">{results.intHomeScore}</strong>
    -
    <strong style="font-size: 10px;">{results.intAwayScore}</strong> 
    <strong style="font-size: 10px;">{results.strAwayTeam}</strong>
    <strong style="color:#C3414D;font-size: 14px;">{results.dateEventLocal}</strong>
    <br>
    {/subloop-array:results}
  {/subloop:results}
 [/jsoncontentimporter]

</center>

我正在使用 Elementor 的免费版本，但如果有必要，我不介意为 PRO 版本支付太多费用，尽管我相信那里没有我可以使用的任何块，并且也想知道是否可以这样做因为我想深入了解它。

有没有人有任何想法或任何指导我可以检查以能够使用 HTML 做到这一点？

Answer 1

这是一个示例，说明您主要使用 CSS 可以做什么 https://codepen.io/panchroma/pen/jOGGPKq

我认为您想要尝试并做的是看看您是否可以在您的 JSON 代码周围添加额外的 HTML。例如，看看你是否可以用类似的东西把一些文本变成斜体

<emphasis>{subloop-array:results:-1}</emphasis>

如果您能够做到这一点，那么下一步就是添加额外的 div 来包装所有结果、每个单独的结果以及每个结果中的详细信息。如本截图所示

如果你能做到这一点，那么我认为你已经解决了问题。

您现在有了一些可以使用 CSS 样式定位的类，一个基本的 CSS 示例是：

.results-wrap {
  display: flex;
  overflow-y: scroll;
}

.result {
  padding: 5px;
  min-width: 200px;
}

.details {
  background-color: #fff;
}

https://codepen.io/panchroma/pen/jOGGPKq