Question

任何人都知道我怎么能得到“AUTHOR发表于2010年4月3日| 0评论”在新闻链接的标题下面而不是它是A CLASS的一部分？我希望它的外观，读取和功能如下：

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

在初始搜索字段中的所有内容，然后用户可以单击并进一步扩展。如果我把它放在A CLASS标签中，我显然可以使它工作，但这就是问题所在。我不能在那里。

编辑：忘了向大家展示我目前正在努力创造的东西; http://www.notedls.com/demo

Answer 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网站上查看

Answer 2

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

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

CSS放置文字

2 个答案: