从 JSON 检索数据时 HTML 图像未正确对齐

HTML images not aligning properly when retrieving data from JSON

本文关键字:对齐 图像 HTML JSON 检索 数据      更新时间:2023-09-26

我一直在制作一个英雄联盟的小网站,该网站使用 Riot API 来检索精通树并显示图像。我有三个div 包裹在另一个div 中,除了每个div 的最后 2 行外,所有图像都正确对齐,我不知道为什么。这一定与我如何处理其中带有 null 的行有关。我还注意到行似乎想要自我对齐(通过不处理空值来解决这个问题(,所以也许这是div 固有的东西。我无法链接该网站,因为我没有保护我的 api 密钥,所以这里有一张图片:https://i.stack.imgur.com/as5Bi.png

这是 HTML:

<div>
        <div id="Offense_page" style="padding-left: 15px; padding-right: 15px; float: left; border: 5px solid white;">Offense</div>
        <div id="Defense_page" style="padding-left: 15px; padding-right: 15px; float: left; border: 5px solid white;">Defense</div>
        <div id="Utility_page" style="padding-left: 15px; padding-right: 15px; float: left; border: 5px solid white;">Utility</div>
    </div>

这是javascript代码:

$.ajax({
                url: url_tree,
                type: 'GET',
                dataType: 'json',
                data: {
                },
                success: function (json) {
                    test_id = "";
                    space = false;
                    pages = ["Offense", "Defense", "Utility"];
                    lengths = [json.tree.Offense.length, json.tree.Defense.length, json.tree.Utility.length];

                    for (i = 0; i < pages.length; i++) { //for each page
                        test_id = "";
                        space = false;
                        for (x = 0; x < lengths[i]; x++) {  //for the length of each page object
                            for (n = 0; n < json.tree.Offense[x].masteryTreeItems.length; n++) { // for the length of each Items object
                                if (json.tree[pages[i]][x].masteryTreeItems[n] != null && json.tree[pages[i]][x].masteryTreeItems[n] != "") {
                                    if (space) {
                                        test_id += "<img style='"opacity: 1.0; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; margin-left: 74px;'" src=http://ddragon.leagueoflegends.com/cdn/4.20.1/img/mastery/" + json.tree[pages[i]][x].masteryTreeItems[n].masteryId + ".png>";
                                        space = false;
                                    }
                                    else {
                                        test_id += "<img style='"opacity: 1.0; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px;'" src=http://ddragon.leagueoflegends.com/cdn/4.20.1/img/mastery/" + json.tree[pages[i]][x].masteryTreeItems[n].masteryId + ".png>";
                                    }
                                }
                                else {
                                    space = true;
                                }
                            }
                            test_id += "<br />";
                        }
                        document.getElementById(pages[i] + "_page").innerHTML = test_id;
                    }
                }
            });

这是我从中提取的 JSON 数据:http://pastebin.com/DAAtukg4

看来你已经把text-align:center给了某个父级div。

text-align:center更改为text-align:left。也许,这将解决问题。