7

我正在关注本指南，了解如何仅使用 CSS3 制作家谱。但我真的不知道如何结婚。

澄清一下：代码现在的作用是： 在此处输入图像描述

我要补充的是： 在此处输入图像描述

我知道这是一个简单的问题，但现在我有货

4

5 回答 5

3

将丈夫/妻子放在同一个 li 元素中然后使用 CSS 连接它们怎么样？像这样的东西：

<style>
  .husband { float: left; }
  .wife { margin-left:10px; }
  .wife::before { 
    /* pseudo CSS, will need to be modified */
    content: '';
    position: absolute; top: 0; right: 50%;
    border-top: 1px solid #ccc;
    width: 50%; height: 20px;
  }
</style>


<li>
    <ul>
        <li>
            <a class="husband" href="#">Grand Child</a>
            <a class="wife" href="#">Wife</a>
            <ul>
               <li><a href="#">Kid</a></li>
               <li><a href="#">Kid</a></li>
            </ul>
        </li>
    </ul>
</li>
于 2014-05-12T22:32:21.033 回答
3

从页面上的注释：

“注意：我正在开发这个家谱的新版本，它将在一定程度上支持 IE，并且将有多个父级，使其成为家谱的实用解决方案。”

因此，目前似乎还不支持“多父母”。

于 2012-08-21T09:26:03.713 回答
3

似乎有人更新了原始代码以支持夫妻关系。祝你好运！

于 2015-06-15T17:08:16.623 回答
2

这是我采取的方法

<li>
  <ul>
    <li>Father</li>
    <li>Mother</li>
  </ul>
  <a href="http://www.clarkeology.com/names/clarke/21/james">James CLARKE1779 - 1860</a>
  <div itemprop="spouse">
    <a href="http://www.clarkeology.com/names/cole/19/elizabeth">Elizabeth COLE 1794 - 1865</a>
  </div>
  <ol>
    <li><a>Child</a></li>
    <li><a>Child</a></li>
    <li><a>Child</a></li>
  </ol>
</li>

然后<li>整个树中的任何一个都可以像这样重复（尽管如果你将孩子和父母都添加到他们身上，你会得到一团糟......通常只要你越过那个视图中的“核心”人就可以添加一个或另一个。

真实示例在http://www.clarkeology.com上，在 /css/_tree.css 上带有带注释的 css，我为解析 GEDCOM 文件并创建必要的 html 而编写的代码在https://github.com/pauly/ js-gedcom

我使用itemprop而不是class上面的，因为我实际上也将 schema.org 微格式添加到我的所有文件中，但是类可以正常工作。

前几天我发现原来的 css 时，我真的很喜欢，这很有趣。欢迎在我的代码上请求请求！

于 2016-09-29T13:42:56.163 回答
1

这个怎么样？

<li>
    <ul>
        <li>
            <a href="#">Grand Child</a>
        </li>
        <li>
            <a href="#">Wife</a>
        </li>
    </ul>
</li>

所以将最后一个孙子包装成一个ul。这为您提供了两者之间的界限，而不是介于两者之间，但我认为您的盒子模型现在不允许这样做......

于 2012-08-21T09:30:25.737 回答