html で複数のcheckbox毎に横に配列する場合

Question

###前提・実現したいこと
checkboxについて基本的な質問かもしれないのですが、3〜5このチェックボックスを1つのグループとし、それを3つほど横に並べるにはどうすればできるでしょうか？

CSSでできない状況です。（うまくグループ化できていない？）

現在作成中のものです。プランと料金を1つのグループとして横に上手く並べたいのですが、出来ない状況です。

ご教示いただけませんでしょうか？

###該当のソースコード

<h1><img src="image/ecalbt008_002.jpg">&nbsp;契約者を検索</h1><br>

    <form name="plan" method="post" action="#">
        <div>
        <h2><img src="image/enpitu.jpeg">&nbsp;加入中のプランを選択:<h2><br>
        <p>
&nbsp;&nbsp; <label class="checkbox-inline"><input type="checkbox" ng-model="plan['type1']"><font size ="3">Aプラン</font></label>

&nbsp;  <label class="checkbox-inline"><input type="checkbox"   ng-model="plan['type2']"><font size ="3">Bプラン</font></label><br>&nbsp;


&nbsp;  <label class="checkbox-inline"><input type="checkbox"  ng-model="plan['type3']"><font size ="3">Cプラン</font></label>&nbsp;


&nbsp; &nbsp; <label class="checkbox-inline"><input type="checkbox"  ng-model="plan['type4']"><font size ="3">Dプラン</font></label>&nbsp;
       </p>
      </div><br>


        <div>
        <h3><img src="image/enpitu.jpeg">&nbsp;月額の料金を選択:<h3><br>
        <p>
        <label class="checkbox-inline"><input type="checkbox" name =price ng-model="price['range1']"><font size ="3">0  -999円</font></label>&nbsp;&nbsp;&nbsp;&nbsp;


        <label class="checkbox-inline"><input type="checkbox" name =price ng-model="price['range2']"><font size ="3">1000-1999円</font></label><br>


        <label class="checkbox-inline"><input type="checkbox" name =price ng-model="price['range3']"><font size ="3">2000-2999円</font></label>


        <label class="checkbox-inline"><input type="checkbox" name =price ng-model="price['range4']"><font size ="3">3000-3999円</font></label><br>


        <label class="checkbox-inline"><input type="checkbox" name =price ng-model="price['range5']"><font size ="3">4000-4999円</font></label>


        <label class="checkbox-inline"><input type="checkbox" name =price ng-model="price['range6']"><font size ="3">5000-5999円</font></label>
       </p>
      </div><br>

###試したこと
(<p>をつかってみたのですが、上手くまとめられず、、、）
cssは文字の装飾や別の箇所は、書いているのですが、ここのcheckboxに関わるところは何も書けておらず、ここにのせると見難くなるかと思いのせておりません

Comments

[kei344]

コードはコードブロックで囲んでください。```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。
また、CSSも同じくコードブロックで質問に追記してください。

[kei344]

''' ではなく、```です。ご確認願います。

Answer 1

コードを拝見して気になる点がいくつかあります。
0. <font> タグは非推奨です。
0. </h2> </h3> の閉じタグが間違っています。閉じタグを適切に設定しない場合、CSSが適切にあたらない事があります。
0. 文中の改行以外に <br> を使用するのは避けましょう。

---

横に上手く並べたい

こういう感じでしょうか。

<style>
.wrap {
	overflow: hidden;
}
.wrap > .inner {
	box-sizing: border-box;
	float: left;
	padding: 10px 20px 10px 0;
	width: 50%;
}
.wrap > .inner label {
	display: block;
}
</style>

<h1><img src="image/ecalbt008_002.jpg">&nbsp;契約者を検索</h1>
<form name="plan" method="post" action="#">
	<div class="wrap">
		<div class="inner">
			<h2><img src="image/enpitu.jpeg">&nbsp;加入中のプランを選択:</h2>
			<p>
			<label class="checkbox-inline"><input type="checkbox" ng-model="plan['type1']">Aプラン</label>
			<label class="checkbox-inline"><input type="checkbox" ng-model="plan['type2']">Bプラン</label>
			<label class="checkbox-inline"><input type="checkbox" ng-model="plan['type3']">Cプラン</label>
			<label class="checkbox-inline"><input type="checkbox" ng-model="plan['type4']">Dプラン</label>
			</p>
		</div>
		<div class="inner">
			<h3><img src="image/enpitu.jpeg">&nbsp;月額の料金を選択:</h3>
			<p>
			<label class="checkbox-inline"><input type="checkbox" name =price ng-model="price['range1']">0  -999円</label>
			<label class="checkbox-inline"><input type="checkbox" name =price ng-model="price['range2']">1000-1999円</label>
			<label class="checkbox-inline"><input type="checkbox" name =price ng-model="price['range3']">2000-2999円</label>
			<label class="checkbox-inline"><input type="checkbox" name =price ng-model="price['range4']">3000-3999円</label>
			<label class="checkbox-inline"><input type="checkbox" name =price ng-model="price['range5']">4000-4999円</label>
			<label class="checkbox-inline"><input type="checkbox" name =price ng-model="price['range6']">5000-5999円</label>
			</p>
		</div>
	</div>
</form>

Comments

[KatsukiSugiura]

それぞれdivで囲う、グループ毎にdivで囲う、全体をdivで囲う、それぞれclassやらidやらdataやらで名前を指定。

グループ化したdivにfloatで回り込ませるか、グループ化を囲っているdivにdisplayでflexやらboxやらで横にする。

どちらも嫌ならtableで同じ行に配置。

floatの場合cleafixと呼ばれる指定と直近の要素にclearでfloatを解除する必要が有ります。

直近の要素にもfloatの効果が継承されてしまいレイアウト崩れが起こる可能性がある為必須です。

display関連はブラウザの対応状況など踏まえた上でベンダープレフィクスを利用したり、javascriptで制御するなどして対応する必要が有ります。

それでもダメなら必ず何処か間違えているので、クラウドソーシングなどでデバッグ依頼などして下さい。 以上です。

[zyunnsalome]

綺麗にできました。ありがとうございます。非常に助かりました。

[kei344]

To: KatsukiSugiura
回答はコメントではなく「あなたの回答」という欄にお書きください。あなたの回答がもったいないです。

To: zyunnsalome
解決できたようでよかったです。まだ「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。

[KatsukiSugiura]

すみません以後気をつけます。