让动态添加的标签看起来像标签

Question

我想做的是与 SO 在主页上所做的类似：

所以，我所做的就是添加这段代码：

C# 代码隐藏：

    protected void LoadInterests()
    {

        //Fill Interests based on table values
        string strSQL2 = "SELECT UM.MatchValue, DD.DDLValue FROM tmpUsermatch UM ";
        strSQL2 = strSQL2 + "INNER JOIN (SELECT StoredValue, DDLValue FROM tmpDropdowns WHERE ddlName = 'ddlInterests') DD ";
        strSQL2 = strSQL2 + "ON UM.MatchValue = DD.StoredValue ";
        strSQL2 = strSQL2 + "WHERE MatchField = 'MatchInterests'  AND UserID = '" + lblUserID.Text + "'";
        using (var con = new SqlConnection(strCon1))
        using (var adapter2 = new SqlDataAdapter(strSQL2, con))
        {
            DataTable dt2 = new DataTable();
            adapter2.Fill(dt2);
            foreach (DataRow row in dt2.Rows)
            {
                Label dynamicLabel = new Label();
                dynamicLabel.ID = "lbl" + row["DDLValue"].ToString();
                dynamicLabel.Text = row["DDLValue"].ToString();
                dynamicLabel.CssClass = "lbl.interests";
                div1.Controls.Add(dynamicLabel);
            }
        }
    }

asp.net:

    <div>
        <asp:Panel ID="Panel1" runat="server" Height="100px" ScrollBars="Vertical" Style="float: left; margin-left: 1px; background-color:#f5f5f5" Width="807px" BorderColor="LightSteelBlue" BorderStyle="Solid" BorderWidth="1px">
            <div id="div1" runat="server" class="clear" style="width:820px; border-width:1px; margin-left:20px"></div>
        </asp:Panel>
    </div>

CSS:

lbl.interests
{
    background-color: #465c71;    
/*    background-color: white;    */
    border: 1px #4e667d solid;  
    color: white;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}

最后的结果还是这样：

当我希望它看起来像这样时：

关于我哪里出错的任何想法？

Answer 1

换行

dynamicLabel.CssClass = "lbl.interests";

到

dynamicLabel.CssClass = "lbl interests";

并将 CSS 选择器更改为

.lbl.interests

记住 . 仅在 CSS 中用于选择 class 名称，它不会出现在 HTML 中，如果您只在 [= 中指定名称34=] 与 lbl 类似，您指的是 HTML 中的标签，根据 HTML，该标签无效，但也与代码匹配。

我的建议是先编写纯 HTML 和 CSS 并确认您的布局按预期工作，然后使用 C#/ASP.Net[= 生成 HTML 16=]

请参考以下 link 以获得有关 CSS 选择器的帮助
W3Schools - CSS Selectors

让动态添加的标签看起来像标签

Getting dynamically added labels to look like tags

css

c#

asp.net

code-behind

C# 代码隐藏：

asp.net:

CSS: