【问题标题】：Getting dynamically added labels to look like tags让动态添加的标签看起来像标签
【发布时间】：2016-05-04 09:40:52
【问题描述】：

我想做的是类似于 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;
}

最终的结果还是这样的：

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

关于我哪里出错了有什么想法吗？

【问题讨论】：

你试过设置'display: inline-block;' ?
不是一个解决方案，更多的是一个（可能没用的）建议：如果你的代码投入生产，就有可能在你的代码中注入 SQL 注入 :)发布在 SO 上，但是......我有一个需要抓挠的痒 :D)
另外，我注意到 <div id='div1'> 应该是 <div id='dynamicLabel'>... 错字？

标签： c# css asp.net code-behind

【解决方案1】：

换行

dynamicLabel.CssClass = "lbl.interests";

到

dynamicLabel.CssClass = "lbl interests";

并将 CSS 选择器更改为

.lbl.interests

请记住. 仅用于在 CSS 中选择类名，它不会出现在 HTML 中，如果您仅在 CSS 中指定名称，如 lbl，您指的是 HTML 中的标签，根据该标签是无效标签到 HTML 并且也与代码匹配。

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

请参阅以下链接以获取有关 CSS 选择器的帮助
W3Schools - CSS Selectors

【讨论】：

这是一个很大的帮助！需要做更多的事情才能到达我想去的地方，但这是一大步。谢谢！