Div 정의 목록 주변 붕괴

Question

블로그의 메타 데이터 영역을 디자인 중이며 제대로 포맷하는 데 문제가 있습니다.

Div에 3 개의 정의 목록이 있습니다. Div는 DL 항목에있는 패딩을 존중하지 않습니다. 나는 보여줄 그림에 링크했다. 첫 번째 이미지는 올바른 형식이 무엇인지 보여줍니다. 이는 Div 및 DL의 패딩이 동일하기 때문입니다. 그러나 두 번째 그림에서 보듯이, 내 DL의 패딩을 늘리면 컨테이너 Div는 그것을 존중하지 않습니다.

주목할 가치가있다 : 나는 디스플레이를 사용하고있다 : 인라인, 여기에 뜨지 마라.

http://gettinderbox.com/blogdesign/i/busted.gif

.post_meta { 
padding: 8px 0 7px 0; 
margin: 20px 0; 
border-top: 1px solid #dddcdc; 
border-bottom: 1px solid #dddcdc; 
display: block; 
} 

.post_meta dl { 
display: inline; 
border-right: 1px solid #dddcdc; 
margin-right: 10px; 
padding: 20px 5px 20px 0; 
} 

.post_meta dt { 
font-weight: bold; 
margin-right: .1em; 
display: inline; 
} 

.post_meta dd { 
display: inline; 
} 

.post_content { 
display: inline; 
} 

<div class="post_meta"> 
<dl> 
<dt>August 10, 2010</dt> 
</dl> 
<dl> 
<dt>Posted By</dt> 
<dd><a href="">Dustin Sapp</a></dd> 
</dl> 
<dl> 
<dt>Posted In</dt> 
<dd><a href="http://">Proposals</a>, <a href="http://">Editing</a></dd> 
</dl> 
</div><!-- END POST_META --> 

Answer 1

어떻게 inline-block 대신 inline 사용에 대한?