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。

Answer 2

使用定义列表（<dl>）并使用css设置样式。在列表中添加一个唯一的类，以避免与其他CSS样式冲突：jsfiddle

<强> HTML

<dl class="yourclass">
    <dt>ServerName</dt>
    <dd><a href="#" type="button">TestName</a></dd>
    <dd><a href="#" type="button">TestName</a></dd>
    <dt>ServerName2</dt>
    <dd><a href="#" type="button">TestName</a></dd>
    <dd><a href="#" type="button">TestName</a></dd>
</dl>

<强> CSS

dl.yourclass dd {
    display:inline;
}

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

2 个答案: