javascript - 在 html 页面中以有序的方式显示结果

Question

我是 html 的新手，我想向您咨询我遇到的问题。

我有一个具有这种结构的 json 对象(仅示例):

  {
     [{
         ServerName: "Server1",
         TestResults: [{
             Name: "Test1",
             ErrorMessage: "",
             Success: true
             },
             Name: "Test1", ErrorMessage: "", Success: true
         }]
     }, {
         ServerName: "Server2",
         TestResults: [{
             Name: "Test1",
             ErrorMessage: "",
             Success: true
             },
             Name: "Test1", ErrorMessage: "", Success: true
         }]
    }]
 }

我的 javascript 代码获取此对象并假设从中创建如下内容:

         <ul>
            <lh>ServerName</lh>
            <li><a href="#" type="button">TestName</a></li>
            <li><a href="#" type="button">TestName</a></li>
            <lh>ServerName2</lh>
            <li><a href="#" type="button">TestName</a></li>
            <li><a href="#" type="button">TestName</a></li>
            .....
        </ul>

我想知道如何创建这样一个列表，使每个 'lh' 都有自己的一行， 并且每 2-3 个 'li' 在同一行。

你能帮我找到最好的解决方案吗？

P.S - 我没有使用表格，因为它在 jquery mobile 中存在一些问题，有时会使其不适合页面大小。

Answer 1

如果我没理解错的话，你可以为此添加一些 css:

ul>lh{
    display: block;
}
ul>li{
    display: inline;
}

查看此 jsfiddle .