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？

Div围绕定义列表折叠

1 个答案: