【CSS】親要素は右揃えで子要素は左寄せにする方法

今回は親要素は右寄せにして子要素は左寄せにする方法について紹介していきます。

親要素は右揃えで子要素は左寄せ

html

<div class="box">
	<ul>
		<li>テキスト</li>
		<li>長いテキスト</li>
		<li>ABC</li>
	</ul>
</div>

css

.box{
	text-align: right;
	padding: 10px;
	background: #eee;
}
.box ul{
	display: inline-block;
	padding: 10px;
	text-align: left;
	background: #aaa;
}

サンプル