Question

我对内联元素有问题，特别是<a>元素。它如下：

<a class="text></a>

.text{
display:inline-block;
background:red;
padding:5px
}

问题是我用JSON加载了它所持有的文本。现在我希望它的背景是文本的长度，但问题是html加载然后json加载所以它不会拾取文本的长度。我可以设置一个固定的宽度，但我宁愿它是文本的大小。我有什么选择吗？谢谢！

编辑：似乎导致问题的方法比其他浏览器更多。

JavaScript的：

$(document).ready(function() {
var data;
function loadContent(){ 
    $.ajax({
        url: "json/content.json",
        data: "nocache=" + Math.random(),
        type: "GET",
        contentType: "application/json",
        dataType: "json",
        success: function(source){
            data = source;
            showInfo();
        },
        error: function(data){
            alert("Failed to load content");
        }
    }); 

}

loadContent();
    function showInfo(){
        $(".text").html(data[lang]['startpage']['text']);
}
});

Answer 1

我不是百分之百，如果这样可以解决您的问题，但尝试这样做，将source传递给函数，而不是使用您的（未声明的）data变量。

$(document).ready(function() {

function loadContent(){ 
    $.ajax({
        url: "json/content.json",
        data: "nocache=" + Math.random(),
        type: "GET",
        contentType: "application/json",
        dataType: "json",
        success: showInfo,
        error: function(data){
            alert("Failed to load content");
        }
    }); 

}

loadContent();

function showInfo(data){
    $(".text").html(data[lang]['startpage']['text']);
}
});

更新

要将所有div放在同一行，请将#game-nav从inline更改为inline-block。

#game-nav li {
    display: inline-block;
}

display:inline元素（如<b>或<span>包裹不是你想要的内容，内联块可以换行到新行，但它们不会破坏中间词。

在加载JSON内容之前设置的内联元素宽度

1 个答案:

更新