Question

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

enter image description here

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>

使用表格可以轻松实现此任务。但是如何使用无序（ul）列表呢？有什么想法吗？

Answer 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元素的宽度

Answer 2

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

将列表元素拉伸到完整的容器宽度

2 个答案: