li内で改行したときにインデントを揃えるCSS

最も楽な方法

ul {
	padding-left: 20px;
	list-style-type: disc;
	list-style-position: outside;
}

ulに対してmarginかpaddingを指定するだけでOK。単純ですね。

list-style-positionはデフォルトでoutsideになっているはず。そもそもその時点でテキストのインデントは揃っているのだが、マーカーが意図しない位置になる場合がある。これを解消するためにinsideにしてしまうと、今度はインデントが揃わなくなる。なので、outsideのままで余白を調整するのが1番楽だと思います。

他にも方法はあるが、あまりやりたくない

他の方法 その1

ul {
	padding-left: 20px;
}

li {
	position: relative;
	display: block;
}
li:before {
	position: absolute;
	content: '';
	top: 9px;
	left: -20px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #333;
}

いっそのことliをデフォルトのdisplay: list-item;からdisplay: block;にしてしまう方法。

そもそもリストアイテムではなくなるのでlist-styleが効かない。そのため、マーカーは疑似要素でつくる。

場合によってはありだと思うが、最初の方法よりは面倒。

他の方法 その2

ul {
	padding-left: 20px;
	text-indent: -20px;
	list-style-type: disc;
	list-style-position: inside;
}

list-style-positionをinsideにして、ズレをtext-indentで調整する方法。

環境によってはズレてしまう（iPhone6s・Chromeでしか確認していないが）ので、あまりやりたくない。