Abh*_*ote 3 html css json opensocial
我想在使用表格形式显示的数据<ul>和<li>,如下所示:
mydata mydata mydata mydata mydata mydata
mydata mydata mydata mydata mydata mydata
mydata mydata mydata mydata mydata mydata
我不能用<table>; 我必须使用<ul> <li>.实际上,问题在于OpenSocial在渲染来自JSON的数据时<li repeater=${Exp}>
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>
您可以在http://mirificampress.com/permalink/the_amazing_li中获取更多信息