li的问题

<li>abcd</li>
li的高度是100px，如何让文字显示在li的底部？或者显示li的任意高度

解决方案 »

  1.   

    <html>
    <head>
    <style>
    *{margin:0; padding:0;}
    ul{
        width:300px;
    }
    ul li{
        width:300px;
        display:table-cell;
        vertical-align:bottom;
        height:50px;
        border:1px solid #000;
    }</style>
    </head>
    <body>
        <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
         <li>5</li>
        </ul>
    </body>
    </html>
      

  2.   

    <html>
    <head>
    <style>
    *{margin:0; padding:0;}
    ul{
        width:300px;
    }
    ul li{
        width:300px;
        padding-top:40px;
        height:20px;
        line-height:20px;
        border:1px solid #000;
    }</style>
    </head>
    <body>
        <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
         <li>5</li>
        </ul>
    </body>
    </html>
    用padding吧table-cell  ie6,7不支持