Jquery 将列表元素拉伸到整个容器宽度_Jquery_Html_Css_Jquery Selectors_Html Lists

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

jquery html css

Jquery 将列表元素拉伸到整个容器宽度,jquery,html,css,jquery-selectors,html-lists,Jquery,Html,Css,Jquery Selectors,Html Lists,我想将无序列表（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 c

我想将无序列表（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>


将列表元素拉伸到整个容器宽度
#容器{
宽度：100%；
}
保险商实验室{
高度：20px；
保证金：0；
填充：0；
列表样式：无；
边框：1px实心#000；
}
ulli{
浮动：左；
}
我拥有的：


元素1
元素2
元素3




我需要的是：


要素1
要素2
要素3

使用表很容易实现此任务。但是如何处理无序（ul）列表呢？

有什么想法吗？

你可以试试：

ulli{
浮动：左；
宽度：33.33%；
}

你可以试试：

ulli{
浮动：左；
宽度：33.33%；
}

见此

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

计算li元素的数量，并将总宽度除以该长度，然后使用jquery设置每个li元素的宽度，列表将自动生成。可以是3、4或10个元素。@Bounce您在问题中没有说。列表是自动生成的。它可以是3、4或10个元素。@Bounce你在问题中没有说。这真的很好！！是否可以使用特定分区中的图像来执行此操作？让所有的图片共享100%的容器分区。这真的很好！！是否可以使用特定分区中的图像来执行此操作？使所有图像共享容器分区的100%。

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