CSSでチェックボックスを右寄せにしたい

タイトルの通りですが、現状は下図の上側のようになっています。

これを下側のようにチェックボックスを右寄せにし、「グループ1」の文字が文字数オーバーしてもチェックボックスの幅はそのままで文字部分だけ下に折り返すようにしたいです。

下コードのように「text-align: right;」で右寄せになってくれると思ったのですが、
どうも効果がないようです。

▼HTML
<div class="selected-group-item">
	<label>
		<span class="group-label">グループ1</span>
		<input type="checkbox" class="group-checkbox" checked="checked">
	</label>
</div>

▼CSS
.selected-group-item {
	background-color: #FFFFFF;
	margin-left: 6px;
	margin-right: 6px;
	margin-bottom: 2px;
}
.group-checkbox {
	text-align: right;
}
.group-label {
	
}

◆追記1
yoshi0819さんのCSSを適用すると下図のように文字数が長い場合は想定通りですが、
文字数が少ないと右寄せになってくれませんでした。

行動規範の内容に同意します

回答3件

ベストアンサー

再現に必要なスタイルがすべて提示されていないと思われるので解決しないかもしれませんが

CSS
1.selected-group-item > label {
2    display: flex;
3    justify-content: space-between;
4}

投稿2018/11/20 09:26

x_x

総合スコア13749

yrema

2018/11/20 09:36

ありがとうございます。これで解決できました。

yrema

2018/11/20 09:37

ちなみに「再現に必要なスタイルがすべて提示されていない」で気づいてよく見るとbootstrapが適用されていたようです・・・。

行動規範の内容に同意します

Flexboxを使うとボックスの位置や大きさなどを自動調整してくれるので、Flexboxを使うべきです。

コードは、x_xさんの書いた通りでいいと思いますが、もし、Flexboxを他の場面で使いたい場合は自分も参考にしている外部リンクを参照してみてはいかがですか?

投稿2018/11/20 09:35

tm0302

総合スコア16

こんな感じでしょうか？

HTML
1<div class="selected-group-item">
2    <label>
3        <div class="group-label">グループああああいうえおはあはたはさあはあさあはひたらあはひたらはあはらたさはあふまさはあさたはひあさまはらあさたらはたさま1</div>
4        <input type="checkbox" class="group-checkbox" checked="checked">
5    </label>
6</div>

CSS
1.selected-group-item {
2    background-color: #FFFFFF;
3    margin-left: 6px;
4    margin-right: 6px;
5    margin-bottom: 2px;
6}
7.group-checkbox {
8    float: right;
9}
10.group-label {
11  float: left;
12  width: 95%; /*ここはすきな値で*/
13}