将列表元素拉伸到整个容器宽度答案

【问题标题】：Stretch list elements to full container width将列表元素拉伸到整个容器宽度
【发布时间】：2012-06-02 19:48:30
【问题描述】：

我想让无序列表(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) 列表呢？有什么想法吗？

【问题讨论】：

标签： jquery html css jquery-selectors html-lists

【解决方案1】：

看到这个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 元素的宽度

【讨论】：

这真是太好了！！可以用某个div中的图像来完成吗？使所有图像共享“该”容器 div 的 100%。

【解决方案2】：

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

【讨论】：

列表是自动生成的。它可以是 3、4 或 10 个元素。
@Bounce 你没有在问题中说。