"HTML dt, dd 한줄로 출력하기"의 두 판 사이의 차이

3번째 줄: 3번째 줄:
*dt에 <code>float: left;</code>를 주면 됨
*dt에 <code>float: left;</code>를 주면 됨


<style type="text/css">
==예시==
* { padding:0; margin:0 }
<source lang='html' highlight='2' run>
dl { width:100%; overflow:hidden; background:#ff0; }
<style>
dt { float:left; width:50%; /* adjust the width; make sure the total of both is 100% */ background:#cc0; }
dt { float: left; }
dd { float:left; width:50%; /* adjust the width; make sure the total of both is 100% */ background:#dd0 }
</style>
</style>
<dl>
<dl>
<dt>Mercury</dt>
<dt>사과</dt><dd>사과나무의 열매</dd>
<dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
<dt></dt><dd>배나무의 열매</dd>
<dt>Venus</dt>
<dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
<dt>Earth</dt>
<dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd?>
</dl>
</dl>
</source>


==같이 보기==
==같이 보기==

2021년 7월 17일 (토) 14:02 판

1 개요

HTML dt, dd 한줄로 출력
  • dt에 float: left;를 주면 됨

2 예시

html
Copy
<style>
dt { float: left; }
</style>

<dl>
	<dt>사과</dt><dd>사과나무의 열매</dd>
	<dt></dt><dd>배나무의 열매</dd>
</dl>

3 같이 보기

편집자 220.119.201.73 J Jmnote Jmnote bot