如何在 ul/li 中设置评论部分的样式答案

【问题标题】：How to style a comment section in ul/li如何在 ul/li 中设置评论部分的样式
【发布时间】：2010-06-26 09:15:54
【问题描述】：

如何在此图库中的每张照片下添加评论部分？（您可以在此处查看我希望执行的操作的图像： - 因为我是新成员，所以不让我发布链接.... zhttp://www.some-things.net/storage/图片109.png)

我知道 iframe 可能不是解决此问题的最佳方式 - 但我的朋友想要一个带有 wordpress 集成的横向滚动区域，但我找不到任何合适的图库插件。

图像以 ul/li 显示 - 但由于它是显示内联的，它不会让我在每个图像下方放置另一个 div。

http://www.some-things.net/storage/anna/wordpress/?page_id=49

基本上，如果需要，我想在每张图片下创建一个包含评论空间的部分 - 类似于上面的图片。

任何有关所需代码的提示都会很棒！

【问题讨论】：

标签： wordpress gallery

【解决方案1】：

将图像和内容放在一个 div 中，然后~~将所有这些 div 浮动到左边。~~使用 inline-block 作为显示和空白：no-wrap。

<html>
<head>
<style type="text/css">
#container {
    white-space: nowrap;
}
.image {
    display: inline-block;
    width: 150px;
}
.comment {
    display: block;
    white-space: normal;
}
</style>
<div id="container"><p>
  <div class="image">
    <div style="height: 200px; width: 150px; background: gold;"></div>
    <div class="comment">Bla bla bla lorum ipsum doler amet amor etc. etc.</div>
  </div>
  <div class="image">
    <div style="height: 200px; width: 150px; background: gold;"></div>
    <div class="comment">Bla bla bla lorum ipsum doler amet amor etc. etc.</div>
  </div>
  ...
  ...
</p></div>

【讨论】：

嘿 Sjoerd - 我现在只是在尝试，但技能还没有达到标准，所以需要进行一些研究。任何提示，请在我解决之前将您看到？ some-things.net/storage/anna/wordpress/?page_id=49
向左浮动不起作用，因为如果它不适合屏幕，它只会换行。我已经编辑了我的问题以显示解决方案。基本上，它使用 whitespace: no-wrap 来避免换行，并使用 display: inline-block 在同一行上有多个块。可能无法在 IE7 中运行。
太棒了！谢谢！我可以问 - 为什么
我使用了第二个 div style 而不是图像。您可以将此 div 替换为图像。