ラジオとチェックボックスボタンのラベルと入力要素の組み合わせ

Question

他の垂直方向の質問と回答を見てきましたが、答えが見つからないようです。あなたの賢明な人々が私の問題を解決する方法を知っていたのかどうか疑問に思っていました。そして、私がどれくらい深く私の穴に入ったかもしれない。

あなたはここに私のコードを表示することができます。https://github.com/LukeBennettUK/techdegree_project_3

私は一緒にこれらを合わせるしようとしています。私はそれらにフレキシブルアイテムを作ってからマージンボトムを追加しようとしました。私が知っている

非常にうるさい。しかし、一番下の項目は、以下のようないくつかの理由で上記1との間に大きなマージンを持っているようです。しかし、私はそれらのすべてを正しく整列させたいだけです。ありがとうございました。

Answer 1

フレックスボックスは魔法のようにあなたの人生を変えようとしています。私は過去1年間私のコードで浮動小数点を使用していないし、私はそれを愛している！ LOL

以下の例では、入力とラベルを保持する親コンテナにflexを適用します。 justify-contentはすべてをすべて左に揃え、align-itemsはすべての子を完全に中央に配置します。ここで

はあなたがFlexで構築することができますクールなレイアウトの全てをお教えします優れたリソースです：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

ul{ 
 
    list-style-type:none; 
 
} 
 

 
.newsletter-row{ 
 
    display:flex; 
 
    justify-content:flex-start; 
 
    align-items:center; 
 
}

<ul> 
 
    <li class="newsletter-row"> 
 
    <input type="checkbox" id="css_nl" value="css" name="css_news"> 
 
    <label for="css_nl">CSS News</label> 
 
    </li> 
 
</ul>

Answer 2

あなたはそれを破ったが、ここソリューションですかIDKの。チェックボックスの右と下に15ピクセルの余白があります。すべて15pxを置くと、そのトリックを行います。あなたのコードをダウンロードして、自分でテストしました。