我有一个无序列表,其内容是使用下面的代码从数据库中动态填充的
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 样式的类...一切正常......
上面的代码返回像这样的无序列表
<ul>Home
<li><a href="#">Country</a></li>
<li>State</li>
<li>City</li>
</ul>
我有更多的 ul 类似地来自数据库。问题是我需要将最长的内容宽度设置为 ul 下的 li 的宽度 例如:上面的国家是最长的,所以“家”下所有里的宽度 应该有相同的宽度....
样式在这里完成,以在外部 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;}
提前致谢
最佳答案
您可以在加载文档后使用 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");
});
});
关于jquery - 如何根据最长的内容宽度设置 li 的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5429372/