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

Question

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

我一直在查看 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 来做，因为我想更深入地了解它。

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

Answer 1

这是您可以使用 mostly 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

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

Show API results horizontal instead of vertical with HTML

html

wordpress

api

web

elementor