1

我想让无序列表（ul）元素（li）拉伸到它的容器宽度。列表是自动生成的。它可以是 3、4 或 10 个元素。我需要你可以在附图中看到：

在此处输入图像描述

HTML 和 CSS 代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Stretch list elements to full container width</title>
    <style type="text/css">
        #container{
            width:100%;
        }
        ul{
            height:20px;
            margin:0;
            padding:0;
            list-style:none;
            border:1px solid #000;
        }

        ul li{
            float:left;
        }

    </style>
</head>
<body>

    What I have:<br>

    <div id="container">
      <ul>
        <li style="background-color:red">element 1</li>
        <li style="background-color:green">element 2</li>
        <li style="background-color:blue">element 3</li>
      </ul>
    </div>

    <br><br>   
    What I need:
    <br>

     <div id="container">
      <table width="100%" cellpadding="0" cellspacing="0">
        <tr>
            <td style="background-color:red">element 1</td>
            <td style="background-color:green">element 2</td>
            <td style="background-color:blue">element 3</td>
        </tr>
      </table>
    </div>

</body>
</html>

用表很容易实现这个任务。但是如何使用 unordered(ul) 列表呢？有任何想法吗？

4

2 回答 2

4

看到这个http://jsfiddle.net/38F9V/1/

$(document).ready(function(){
   var num = $('li').length;
   var width_li = 100/num;
   $('li').css('width',width_li+'%');
});

计算 li 元素的数量，并将总宽度除以该长度，然后使用 jquery 设置每个 li 元素的宽度

于 2012-05-28T12:42:22.930 回答
2

你可以试试：ul li { float: left; width: 33.33%; }

于 2012-05-28T12:36:22.320 回答