css - 2 つの列を CSS で揃える

Question

私は次のようなマークアップを持っています

<div> <label for="a" class="float-left">column 1 row 1</label> <input type="text" value="column 2 row 1" id="a"  class="float-left"/>

<div class="float-clear"></div>

<div> <label for="b" class="float-left">longer column 1 row 2</label> <input class="float-left" type="text" value="column 2 row 2" id="b" />   

<div class="float-clear"></div>

<div> <label class="float-left" for="c">column 1 row 2</label> <input class="float-left" type="checkbox" id="c" />

列 2 の行を左側に揃えるにはどうすればよいですか?現在、ラベルのテキストの長さに応じて配置されていますか? 配置が必要なこの 1 つの場所だけに完全な CSS グリッドは必要ありません。

Answer 1

この 1 か所だけが必要な場合は、margin-left を使用して実行できます。

もう 1 つの答えは、ラベルをインライン ブロック要素にして、すべての幅を設定することです。