如何使用 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>

...这是它的样子：

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

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

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

...它仍然不起作用 - 标签顽固地粘在左侧，就像斗牛犬藤壶咬英国 bobby bloke。

更新 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

这种相当简单的方法 - 向表单添加填充 - 有效：

#formCustCatMaint {
    padding: 4em;
}

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

如果有人想在此基础上添加答案，我很乐意将公开的 50 点赏金奖励给他们。

Answer 4

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

A .NET Label (Not to be mistaken with HTML <label>) 是 .NET Web 控件。

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

要设置 Label 样式，请改用 span 选择器：

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

在这种情况下，paddings/margins 将起作用

顺便说一句

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

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

然后在css中使用class：

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

Answer 5

假设您有 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;
}

如何使用 CSS 将标签向右移动？

How can I move my labels to the right with CSS?

css

margin

dynamic

padding

更新

更新 2

更新 3