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

【问题标题】：How can I move my labels to the right with CSS?如何使用 CSS 将标签向右移动？
【发布时间】：2017-03-30 03:11:22
【问题描述】：

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

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

这是我的 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 的建议，我在创建标签/复选框对的位置进行了尝试：

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()

?!?

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

【问题讨论】：

我认为标签是内联的，它们是 dgaf。尝试内联阻止它们 mofos。
如何在动态生成的标签中做到这一点？我看不到“填充”或“边距”或此类可用属性...

标签： css dynamic margin padding

【解决方案1】：

我参加聚会有点晚了，但正确的解决方案很简单

.NET Label（不要误认为是 HTML <label>）是一个 .NET Web 控件。

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

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

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

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

顺便说一句

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

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

【讨论】：

【解决方案2】：

您是否尝试过将所有内容包装在一个 div 中并为其添加一些填充？

【讨论】：

查看更新；我试过了，但显然做错了。

【解决方案3】：

我认为您最简单的选择是像这样简单地在 HTML 和 CSS 中执行此操作，而不是动态执行此操作：

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

.wrapper {
    padding: 0 32px;
}

【讨论】：

还是不知道怎么做，因为我是动态添加的；除了添加一些 CSS 之外，还有更多内容。

【解决方案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;
}

【讨论】：

【解决方案5】：

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

#formCustCatMaint {
    padding: 4em;
}

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

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

【讨论】：