Я проектирую область метаданных для блога, и у меня возникли проблемы с ее форматированием.
У меня есть 3 списка определений, содержащихся в Div. 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 -->