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();

在上面的代码中，“dropdown”是我用来设置ul的样式...一切都很好......

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

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

我还有更多来自数据库的问题。问题是我需要将最长的内容宽度设置为ul的宽度例如：国家最长，因此所有li的宽度都在“Home”之下应该有相同的宽度......

在这里完成样式以在外部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;}

提前完成

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");
        });
    });

Answer 2

由于项目的实际宽度直到运行时才会确定，并且您必须为下拉列表设置一个硬宽度才能正常工作，我会在将它们附加到dom之后迭代列表项并找到最长的然后调用父母李的element.css('width', widthoflongest)。

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

2 个答案: