css - 如何使用 CSS 将标签移至右侧？

Question

我有一个在设计时放在 Web 表单上的按钮，后面是在浏览时动态添加的一系列标签/复选框对。

我已将按钮移离页面的左边缘，并在动态创建的控件之间添加了一些间距，但标签拒绝离开越界标记，即使我已经尝试添加边距和填充值以将它们移离页面的左边缘。

这是我的 CSS:

<style>
    #Button1 {
        margin: 12px;
        padding: 12px;
    }

    label {
        margin: 24px;
        padding-left: 32px;
    }

    input[type='checkbox'] {
        margin-top: 8px;
    }
</style>

...它的外观如下:

为什么 margin 和 padding-left 都不使标签移动？我怎样才能让他们醒来并感觉到 Boot 在他们的阴沟里？

顺便说一句，我在代码隐藏中创建了标签和复选框:

For i As Integer = 0 To categoryDT.Rows.Count - 1
    ' for testing, limit count TODO - remove or comment out
    If i > 11 Then 'There are thousands...just grab enough to fit on the page without scrolling for now...
        Exit For
    End If
    Dim coName = New Label()
    ' Must prepend with something, as controls cannot share the same ID
    coName.ID = "lbl" + i.ToString()
    coName.Text = categoryDT.Rows(i)(0).ToString()
    formCustCatMaint.Controls.Add(coName)

    Dim chk = New CheckBox()
    chk.ID = "ckbx" + i.ToString()
    chk.Checked = True
    formCustCatMaint.Controls.Add(chk)

    ' Add a "line break" after each checkbox
    Dim l = New Label()
    l.Text = "<br>"
    formCustCatMaint.Controls.Add(l)
Next

更新

根据 Linx 的建议，我在创建标签/复选框对的地方尝试了此操作:

Dim divBegin = New Label
divBegin.Text="<div padding-left = 20px; >"
formCustCatMaint.Controls.Add(divBegin)

For i As Integer = 0 To categoryDT.Rows.Count - 1
   . . . ' code elided for brevity
Next

Dim divEnd = New Label
divEnd.Text="</div>"
formCustCatMaint.Controls.Add(divEnd)

...但它没有任何作用。

更新2

按照 Linx 在第二个答案中建议的做法，我的逻辑真的会变得复杂。我不明白为什么不可能用 css 来处理这个问题。复选框 css 正在工作；按钮 CSS 正在工作；为什么标签 css 不起作用？即使当我这样做时，并尝试暴力解决问题:

label {
    display: block !important;
    margin: 24px !important;
    padding-left: 32px !important;
}

...它仍然不起作用 - 标签顽固地粘在左侧，就像斗牛犬藤壶咬英国鲍比家伙一样。

更新3

奇怪的是(太多了!)，即使这样(在标签文本前添加 5 个空格)也不起作用:

coName.Text = "     "+ categoryDT.Rows(i)(0).ToString()

?!?

耳朵张开，躯干抬起，喇叭鸣响!!!

Answer 1

我来晚了一点，但正确的解决方案很简单

.NET Label (不要与 HTML <label> 混淆)是一个 .NET Web 控件。

一个Label作为 <span> 发送回浏览器 因此浏览器无法识别 css label选择器。

样式Label使用span选择器:

span {
    margin-left: 24px;
    padding-left: 32px;
}

在这种情况下，填充/边距将起作用

---

顺便说一句

您可以将类添加到 Label在后面的代码中使用 CssClass属性:

coName.ID = "lbl" + i.ToString()
coName.Text = categoryDT.Rows(i)(0).ToString()
coName.CssClass = "foo-class"
formCustCatMaint.Controls.Add(coName)

然后在css中使用该类:

.foo-class {
    margin-left: 24px;
    padding-left: 32px;
}