真的需要5吗?我问是因为每个标签的宽度都不同,所以无论如何它都会显得参差不齐。如果你有 5 个长标签彼此相邻,它们可能会渗入为其他事物保留的空间,这就是为什么我认为你说它是 5 列。
你最终可能会在一个名为vegetable-patch的标签上出现一个vege标签。那么vege和它的nect柱之间就会有很大的差距。看起来有点奇怪。
我用的是免费的。来源包括在这里,虽然我忘记了它来自哪里。
希望这可以帮助。
这是帮手
public static class MVCTagList
{
public static string TagList(this HtmlHelper helper, IEnumerable<String> tagListItems, object htmlAttributes)
{
StringBuilder TagListMarkup = new StringBuilder();
TagListMarkup.Append("<ul");
if (htmlAttributes != null) TagListMarkup.Append(" " + htmlAttributes.ToAttributeList());
TagListMarkup.Append(">");
foreach (string tagListItem in tagListItems)
{
TagListMarkup.Append("<li>");
TagListMarkup.Append(String.Format("<a href='/Articles/?tag={0}'>{0}</a>", tagListItem));
TagListMarkup.Append("</li> ");
}
TagListMarkup.Append("</ul>");
return TagListMarkup.ToString();
}
}
这是 HTML
<div style="width:450px; margin-left:50px; ">
<%
List<String> TagListItems = new List<string>();
foreach (var tag in Model)
TagListItems.Add(tag.keyword1);
%>
<%= Html.TagList( TagListItems.AsEnumerable(), new { @class="TagList" })%>
</div>
和 CSS
.TagList { margin: 0 0 0 0; padding: 0 0 0 0; }
.TagList li { display:inline; border:1px solid; background-color:#316AC5; margin-left:3px; padding: 3px 3px 3px 3px; line-height:2em;}
.TagList li a { text-decoration:none; color: white; font-size:85%; white-space:nowrap; }