Могу ли я сделать в табличной форме с <ul>и <li>в HTML? - PullRequest
Новая
       9

Могу ли я сделать в табличной форме с <ul>и <li>в HTML?

3 голосов
/ 19 марта 2010

Я хочу отобразить данные в табличной форме, используя <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}>

Ответы [ 4 ]

6 голосов
/ 19 марта 2010 
<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

6 голосов
/ 19 марта 2010 
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 нужного размера.

0 голосов
/ 19 марта 2010

(для IE требуется IE 8+) 

<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>
0 голосов
/ 19 марта 2010

Это возможно. Вы можете использовать CSS, чтобы полностью изменить форматирование элементов ul и li.

Как данные обозначают новую строку / строку? Является ли каждая строка в табличном формате новым 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, чтобы сформировать табличный вид. Вам также придется «сбросить» все обычное форматирование, применяемое к спискам, например, поля, отступы и т. Д. Переместить элементы списка (или использовать встроенный блок для типа отображения, но не так широко поддерживается)

...