Question

我有一个充满DOM元素的网页，我想从该页面中取出所有h3，并在页面顶部将它们显示为内联。问题是 - 甚至可能吗？

<h3>I want</h3>
    There are tons of other content between them so...
<h3>These headers</h3>
    Keep in mind the're separated by many DOM elements...
<h3>To be displayed</h3>
    Luckily no other h3s between them...
<h3>Inline next to</h3>
    Thank you for trying to help :)
<h3>Each other </h3>

这是我试图使用绝对定位的jsfiddle，但我很确定这样做很难（边距）：

http://jsfiddle.net/zLbuP/

我需要代码至少适用于IE7 以及我不能使用任何JS / jQuery （尽管使用jQuery会很容易）。当然我也无法编辑html本身。

任何想法，还是impossiblu？ ;）

Answer 1

使用jQuery / Javascript这很简单吗？

我只是搞砸了一下，想出了这个：http://jsfiddle.net/zLbuP/19/

代码只是从所有H3中获取内容，删除它们并创建一个新的组合H3。

//When then DOM is ready
jQuery(document).ready(function($) {
    //Cache the content of the headings to a variable so it may be removed before creating a new H3
    //this allows us to select the new H3 without having to use more complex selectors
    var h3text = $('#WhatIHaveNow h3').text();
    // remove the old H3's now that we have their content
    $('#WhatIHaveNow h3').remove();
    // create a new, empty H3 at the top of the parent div
    $('#WhatIHaveNow').prepend("<h3></h3>");
    //insert our cached content
    $('#WhatIHaveNow h3').text(h3text);

});

Answer 2

不幸的是，你无法避免使用JS。您可以将所有h3标记设置为绝对位置，并将它们全部放在顶部，但您需要使用JQuery来设置其边距。我已经制作了一个小脚本，根据前一个兄弟的宽度动态设置每个h3标签的边距：

var margin = 0;
$("#TryMe h3").each(function () {
    margin += $(this).prev().width();
    $(this).css("margin-left", margin + "px")
    margin += 20;
});

您可以在此处查看实时示例：http://jsfiddle.net/VezCA/2/

Answer 3

你可以使用nth-child;即

h3 { position:absolute; left: 0px; top: 0px; }
h3:nth-child(1) { margin-top: 15px; } 
h3:nth-child(2) { margin-top: 30px; }

但是，IE7并不支持nth-child，即使你能按照你想要的方式工作，它仍然非常hackish。正如其他人所说，在jQuery或简单的JS中很容易做到。

CSS - 抓取元素并将它们显示为内联（绝对定位？）

3 个答案: