如何根据最长内容宽度设置li的宽度

Question

我有一个无序列表,其内容是使用下面的代码后面的数据库动态填充的

    StringBuilder output = new StringBuilder();
    int lastDepth = -1;
    int numUL = 0;

    foreach (DataRow row in dt.Rows)
    {
        int currentDepth = Convert.ToInt32(row["Depth"]);
        if (lastDepth < currentDepth)
        {
            output.Append("<ul class=\"dropdown\">");
            numUL++;
        }
        else if (lastDepth > currentDepth)
        {
            output.Append("</li></ul></li>");
            numUL--;
        }
        else if (lastDepth > -1)
        {
            output.Append("</li>");
        }
        output.AppendFormat("<li><span class=\"text\"><a href=\"{1}\" title={1}>{0}</a></span>", row["ApplicationName"], row["Url"]);

       lastDepth = currentDepth;
    }
    for (int i = 1; i <= numUL; i++)
    {
        output.Append("</li></ul>");
    }
    Literal1.Text = output.ToString(); 

在上面的代码"下拉"是我用来设置ul的样式...一切都很好.......

上面的代码返回无序列表lke this

<ul>Home
<li><a href="#">Country</a></li>
<li>State</li>
<li>City</li>
</ul>

我有更多的ul来自数据库.问题是我需要将最长的内容宽度设置为ul的宽度,例如:国家是最长的,所以所有李的"家"下的宽度应该有相同的宽度....

在这里完成样式,以在外部CSS中创建一个良好的外观导航栏

ul.dropdown                         {text-align:left; position:relative;z-index:1; }

ul.dropdown li                      { font-weight: bold;border:1px solid green; float:left;color:white;background: black; }

ul.dropdown a:hover                 { color: white; }

ul.dropdown a:active                { color: white; }

ul.dropdown li a                    { text-align:left; display:inline; padding:4px;
                                      color:white;}

ul.dropdown li:last-child a         { border-right: none; } 


ul.dropdown li:hover                { background: orange; color: white; position:relative; }



.dropdown ul                        {  visibility:hidden; 

position:absolute;  left: 0; }

ul.dropdown ul li                   
{ font-weight: normal; background:black; color: white; float:left; }


ul.dropdown ul li a{color:White; border-right: none;display: inline-block; } 


ul.dropdown ul ul                   { left: 100px; top: 0; }

ul.dropdown li:hover > ul           { visibility: visible;}

Thanx提前

Answer 1

您可以在加载文档后使用JavaScript/jQuery来查找最大li元素的宽度,然后将所有列表元素的宽度设置为该值.

编辑:以下代码将无法正常工作,因为element.css('width')返回"40px".你必须修剪掉"px".编辑2:我修复了代码.

这样的事情:(将'li'选择器改为你需要的任何东西)

$(document).ready(function() {
        var maxWidth = 0;
        var elemWidth = 0;
        $('li').each(function() {
            elemWidth = parseInt($(this).css('width'));
            if (parseInt($(this).css('width')) > maxWidth) {
                maxWidth = elemWidth;
            }
        });
        $('li').each(function() {
            $(this).css('width', maxWidth + "px");
        });
    });