用HTML显示API结果水平而不是垂直
用HTML显示API结果水平而不是垂直
提问于 2021-12-21 01:49:49
我正在构建一个专注于体育的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，但如果需要的话，我不介意为它支付太多费用，虽然我相信没有任何块可以使用，而且我也想知道是否可以使用HTML，因为我想对它有更深入的了解。
有没有人有任何想法或任何指南，我可以检查，以便能够做到这一点与HTML？
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-12-22 14:20:47
下面是一个主要使用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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70429840
复制相关文章
相似问题
腾讯云开发者
