如何使用CSS将标签移到右侧？

Question

我在设计时有一个放在我的Webform上的按钮，然后是一系列在浏览时动态添加的Label / Checkbox对。

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

这是我的CSS：

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

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

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

......以下是它的外观：

为什么没有边距也没有填充左边的标签？我怎样才能让他们醒来并在他们的阴沟里感受到靴子？

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

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的建议，我尝试了创建Label / Checkbox对的地方：

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

您是否尝试将所有内容包装在div中并给予一些填充？

Answer 2

而不是动态地这样做，我认为你最简单的选择就是在HTML和CSS中这样做：

<div class="wrapper">
    (html for labels)
</div

.wrapper {
    padding: 0 32px;
}

Answer 3

我有点迟到了，但正确的解决方案很简单

.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;
}

Answer 4

假设您的HTML有两个div，一个是父div，另一个是子div，如下所示

<div class="maindiv">
<div class="childlabeldiv">
     Align label to right
</div>
</div>

您可以使用以下css将右侧的标签与您需要的其他css对齐

.maindiv{
  width: 100%;
}
.childlabeldiv{
   text-align: right;
}

Answer 5

这种相当简单的方法 - 在表单中添加填充 - 起作用：

#formCustCatMaint {
    padding: 4em;
}

它还为按钮添加了填充，但也没关系。

如果有人想根据此添加答案，我很乐意将50分的开放奖励给予他们。