Question

我正在关注如何使用CSS3制作家谱的guide。但我无法真正理解如何结婚。

澄清：代码现在做的是： enter image description here

我想要添加的是： enter image description here

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

Answer 1

从页面上的注释：

“注意：我正在研究这个家族树的新版本，它将在某种程度上提供IE支持，并且将有多个父级，使其成为家族树的实用解决方案。”

所以看起来好像'多父母'还不支持。

Answer 2

似乎某人有updated原始代码来支持丈夫/妻子的关系。祝你好运！

Answer 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>

Answer 4

这是我采取的方法

<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文件，并在https://github.com/pauly/js-gedcom创建必要的html

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

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

Answer 5

这个怎么样？

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

所以将最后一个大孩子包装成ul。这给你一条线，而不是介于两者之间，但我认为你的盒子模型现在不允许这样做......

CSS3家谱，如何添加妻子

5 个答案: