• HTML
  • CSS

TABLE-CELL 을 이용하여 텍스트 들여쓰기

2019-07-01 417

설명

  • 카카오톡 링크

TABLE-CELL을 이용하여(TEXT-INDENT / 등) 사용하지않고, 들여쓰기 하는 소스입니다.

소스실행 현황

소스보기( X표시가 나타나면 무시하셔도 됩니다! )

<style>
	.text_box {}
	.text_box li {display:inline-table; margin-top:10px}
	.text_box li:first-child {margin-top:0}
	.text_box span, .text_box p {display:table-cell; line-height:1.3em}
	.text_box span {width:1%; white-space: nowrap; padding-right:10px}
</style>
<ul class="text_box">
	<li>
		<span>제목입니다</span>
		<p>
			우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오
		</p>
	</li>
	<li>
		<span>제목입니다 구오</span>
		<p>
			우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오
		</p>
	</li>
	<li>
		<span>나닛</span>
		<p>
			우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오
		</p>
	</li>
	<li>
		<span>떠들리셔</span>
		<p>
			우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오우오오오오오
		</p>
	</li>
</ul>