在同一「行」上的元素的單獨位置

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>