我可以用<；以表格形式呈现吗；ul>；及<；李>；在html中？_Html_Css_Json_Opensocial

我可以用<；以表格形式呈现吗；ul>；及<；李>；在html中？

html css json

我可以用<；以表格形式呈现吗；ul>；及<；李>；在html中？,html,css,json,opensocial,Html,Css,Json,Opensocial,我想使用和以表格形式显示数据，如下所示： mydata mydata mydata mydata mydata mydata mydata mydata mydata mydata mydata mydata mydata mydata mydata mydata mydata mydata 我不能使用；我必须使用。实际上，问题在于OpenSocial在呈现来自JSON的数据时 ul { width: 100%;clear:both;height:32px;list-style-type:no

我想使用

和

以表格形式显示数据，如下所示：

mydata mydata mydata mydata mydata mydata
mydata mydata mydata mydata mydata mydata
mydata mydata mydata mydata mydata mydata

我不能使用

；我必须使用

。实际上，问题在于OpenSocial在呈现来自JSON的数据时

ul { width: 100%;clear:both;height:32px;list-style-type:none;margin:0;padding:0; }
li { width: 20%;height:32px;float: left;list-style-type:none;margin:0;padding:0; }

其中ul
元素表示行。将它们放入所需大小的div中。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">

ul{
    margin: 0 auto;
    padding: 0;
}


/* The wider the #list_wrapper is, the more columns will fit in it */
#list_wrapper{
    width: 200px
}

/* The wider this li is, the fewer columns there will be */
    ul.multiple_columns li{
        text-align: left;
        float: left;
        list-style: none;
        height: 30px;
        width: 50px;
    }

    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div id="list_wrapper">
    <ul class="multiple_columns">
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
        <li>Six</li>
        <li>Seven</li>
        <li>Eight</li>
        <li>Nine</li>
    </ul>
</div>

<!-- Here's the CSS -->


    </div>
    </form>
</body>
</html>

无标题页
保险商实验室{
保证金：0自动；
填充：0；
}
/*#list_包装器越宽，容纳的列就越多*/
#列表包装器{
宽度：200px
}
/*李越宽，柱子就越少*/
ul.multiple_columns li{
文本对齐：左对齐；
浮动：左；
列表样式：无；
高度：30px；
宽度：50px；
}

一个
两个
三
四
五
六
七
八
九


您可以在
中获得更多信息，这是可能的。您可以使用CSS完全更改ul
和li
元素的格式
数据如何表示新行/行？表格格式的每一行是否都是新的ul
？还是说都是一个“ul”
如果是多个列表，例如：
<ul>
    <li>mydata</li>
    <li>mydata</li>
    <li>mydata</li>
    <li>mydata</li>
    <li>mydata</li>
</ul>
<ul>
    <li>mydata</li>
    <li>mydata</li>
    <li>mydata</li>
    <li>mydata</li>
    <li>mydata</li>
</ul>


我的数据
我的数据
我的数据
我的数据
我的数据


我的数据
我的数据
我的数据
我的数据
我的数据


然后使用CSS在li
标记上设置宽度，以形成类似表格的外观。您还必须“重置”应用于列表的所有常规格式，如边距、填充等。浮动列表项（或使用内嵌块作为显示类型，但不受广泛支持）
（对于IE，需要IE 8+）

ul li{显示：表；}
ul li ul{显示：表行；}
ul li ul li{显示：表格单元格；边框：1px实心灰色；}

一个
两个
三
四

五
六
七
八

九
十
十一
十二

这取决于接收列表的布局。每一行都是单一的吗？请详细说明。有了一个表格，你就有了整个东西的
，每行的
，每列的
。那么，现在您是否正在尝试对每行执行
，对每列执行
？另外，我想知道为什么不能使用表结构来显示表格数据。很抱歉，我没有得到它，你能用一个例子来详细说明吗？只需以通常的方式创建ul
/li
，并将此CSS应用于
或文件.CSS。
<style>
ul li { display: table; }
ul li ul { display: table-row; }
ul li ul li { display: table-cell; border: 1px solid gray; }
</style>

<ul><li><ul>
    <li>ONE</li>
    <li>TWO</li>
    <li>THREE</li>
    <li>FOUR</li>
</ul><ul>
    <li>FIVE</li>
    <li>SIX</li>
    <li>SEVEN</li>
    <li>EIGHT</li>
</ul><ul>
    <li>NINE</li>
    <li>TEN</li>
    <li>ELEVEN</li>
    <li>TWELVE</li>
</ul></li></ul>