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

2018년 12월 10일 (월) 16:42 판

1 개요

HTML dt, dd 한줄로 출력

dt에 float: left;를 주면 됨

{ padding:0; margin:0 }

dl { width:100%; overflow:hidden; background:#ff0; } dt { float:left; width:50%; /* adjust the width; make sure the total of both is 100% */ background:#cc0; } dd { float:left; width:50%; /* adjust the width; make sure the total of both is 100% */ background:#dd0 } </style>

Mercury: Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.
Venus: 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.
Earth: Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd?>

2 같이 보기

@@ 3번째 줄: / 3번째 줄: @@
 *dt에 <code>float: left;</code>를 주면 됨
-==예시==
+<style type="text/css">
-<source lang='html5' highlight='2'>
+* { padding:0; margin:0 }
-<style>
+dl { width:100%; overflow:hidden; background:#ff0; }
-dl { margin:0; }
+dt { float:left; width:50%; /* adjust the width; make sure the total of both is 100% */ background:#cc0; }
-dt { margin:0; }
+dd { float:left; width:50%; /* adjust the width; make sure the total of both is 100% */ background:#dd0 }
-dd { margin:0; display:inline; padding-right:3px; }
 </style>
 <dl>
-	<dt>사과</dt><dd>사과나무의 열매</dd>
+<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>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>
-</source>
-<jsfiddle>xgdq1nLw</jsfiddle>
 ==같이 보기==