文本的 CSS 位置答案

【问题标题】：CSS placement of text文本的 CSS 位置
【发布时间】：2011-02-04 03:02:29
【问题描述】：

任何人都知道如何在新闻链接标题下方显示“作者于 2010 年 4 月 3 日发布 | 0 条评论”，而它不属于 A 类？我希望它的外观、阅读和功能如下：

[IMAGE] HEADLINE
        Posted by AUTHOR on April 3rd, 2010 | 0 Comments

所有这些都在最初的查看字段中，然后用户可以单击它并进一步展开。如果我把它放在 A CLASS 标签中，我显然可以让它工作，但这就是问题所在。我不能在那里。

编辑：忘记向你们展示我目前正在尝试用这个创建什么； http://www.notedls.com/demo

【问题讨论】：

您可以为此发布您的标记的 sn-p 吗？
我很好奇；为什么你不能在一个新的 div 或里面添加一个类？
抱歉，这是我正在创建的演示：notedls.com/demo

标签： jquery css html hyperlink accordion

【解决方案1】：

没有看到标记很难说，但这个css2 selector pattern matching spec 可能会帮助你。您可以使用兄弟、子、后代选择器。

另外，您可以尝试 DL/DD/DT html 元素：

<DL>
  <DT>Headline</DT>
  <DD>Posted by AUTHOR on April 3rd, 2010 | 0 Comments</DD>
  <DT>Headline</DT>
  <DD>Posted by AUTHOR on April 3rd, 2010 | 0 Comments</DD>
</DL>

我没有使用这些元素的任何经验，但我的理解是它们的渲染类似于您发布的示例。

在DL、DD、DT 和w3 网站上查看它们

【讨论】：

使用 DT 和 DD 标签不能做的一件事是关联一组标签。因此，使用您的标记，您不能在相关的标题/署名对周围放置一个框。

【解决方案2】：

我看到您已经有一个规则来定位包含附加文本的 div：它的 ul#acc1 > li > div 并且具有 65 像素的填充，目前与您使用的图像的大小相同。但是你可以很容易地增加它以获得更多的缩进。

另外，您可能希望从内部 <ul> 和 <li> 元素中删除“宽度”规范 - 这些都是块级元素，默认情况下会扩展为它们可用的完整宽度。通过为这些指定确切的宽度，您可以冻结它们的大小并防止它们在显示由于不同的字体大小、屏幕等而发生变化时正常流动。此外，如果您更改某些东西的宽度或填充（就像我上面推荐的那样），您将拥有无论如何都要重新计算所有宽度。使用默认的width: auto，您不必担心这些事情。

【讨论】：

对不起，我忘了发布我正在使用的实际示例，这应该可以澄清一些事情：notedls.com/demo
嗯，我已经更新了示例。感谢宽度提示，但也许我只是不明白。我不确定填充/缩进如何对此有所帮助。目前（新示例）在那里有发布者信息，但在错误的位置。我需要它在标题下方，但不在 A 类中。而且我不能在不破坏手风琴的情况下移除 A CLASS。这里的最终目标是让它看起来像有一个
，而且还带有指向作者和 cmets 的链接。虽然我不能在 A CLASS 中包含链接，但您将无法单击这些链接。
我发现它对你很有效。要么，要么我不明白你试图达到的目标：-/