在同一＆＃34;线＆＃34;上的元素的单独位置;

Question

我有许多带有相关标签的文本框。包含它们的div具有一个以所有内容为中心的样式属性，这对于文本框和一些其他工具来说非常有用。

然而，我似乎无法左对齐标签。它目前看起来像这样：

我希望实际结果更像是这样：

<asp:Label ID="rotMkrLbl" runat="server" style="text-align:left">Lorem Ipsum</asp:Label>
<asp:TextBox ID="rotamkrBox" runat="server"></asp:TextBox>

似乎什么都不做。我还不确定如何使用align-content或align-self，但是为这些属性提供flex-start的属性却没有产生效果。

我该如何处理？

Answer 1

您可以为标签添加CSS规则，使其向左浮动。 这将允许标签回落到左边距，但输入字段保持居中。

div { text-align:center;}
label { float:left;}

<div>
    <label for='box1'>Label 1</label>
    <input type='text' id='box1' />
</div>

<div>
    <label for='box2'>Label 2</label>
    <input type='text' id='box2' />
</div>

由于您目前正在使用内联样式，您可以像这样添加它：

<asp:Label ID="rotMkrLbl" runat="server" style="float:left">Lorem Ipsum</asp:Label> 
<asp:TextBox ID="rotamkrBox" runat="server"></asp:TextBox>