0

我正在尝试制作具有多个父选项的家谱。我环顾四周，并没有发现任何与这方面有关的东西。

从http://thecodeplayer.com/walkthrough/css3-family-tree开始，我对其进行了一些修改以得到这个： http ://www.gmrv.es/~sschvartzman/Sara_C._Schvartzman/prueba.html

婚姻链接只是父母列表的另一个元素，但高度为 0。我现在的问题是我不能让孩子们在婚姻中处于中心地位。也就是说，在示例中，将第二次婚姻的孩子设置为家庭的权利。只有孩子 2.1 和 2.2 在第二次婚姻中居中。

如果我将子列表的所有元素都设置为 position:relative，为什么会发生这种情况？

这是html代码：

    <!DOCTYPE html>
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="tree.css" rel="stylesheet">
<title>Family Tree</title>
</head>
<body>
<div class="tree">
  <ul class="pf">
    <li class="parent"><a href="" class="m">
      <div style="display:inline-block; vertical-align:central; padding:30px 10px; width:80px;">Husband<br>1<span>(1861 - 1894)</span></div>
      </a>
    </li>
    <li class="marriage">
          <ul class="c">
            <li><a href="indi.asp?id=13612" class="md">
              <div style="display:inline-block; vertical-align:text-top; padding:30px 10px;">Child<br>
                1.1<span>(1893 - 1919)</span></div>
              </a></li>
            <li><a href="indi.asp?id=13613" class="f">
              <div style="display:inline-block; vertical-align:text-top; padding:30px 10px;">Child<br>
                1.2<span>(1895 - )</span></div>
              </a>               
            </li>

          </ul>
    </li>  

    <li class="parentWithAncestor"><a href="" class="f">
      <div style="display:inline-block; vertical-align:central; padding:30px 10px; width:80px;">Main <br>Person<span>(1866 - )</span></div>
      </a>
    </li>    

    <li class="marriage" style="position: relative">
          <ul class="c" style="position: relative">
            <li style="position: relative"><a href="indi.asp?id=04947" class="md" style="position: relative">
              <div style="display:inline-block; vertical-align:text-top; padding:30px 10px; position: relative">Child<br>
                2.1<span>(1900 - 1943)</span></div>
              </a>
            </li>
            <li style="position: relative"><a href="indi.asp?id=04950" class="m" style="position: relative">
              <div style="display:inline-block; vertical-align:text-top; padding:30px 10px; position: relative">Child<br>
                2.2<span>(1902 - )</span></div>
              </a></li>
            <li style="position: relative"><a href="indi.asp?id=04950" class="m" style="position: relative">
              <div style="display:inline-block; vertical-align:text-top; padding:30px 10px; position: relative">Child<br>
                2.3<span>(1902 - )</span></div>
              </a></li>
            <li style="position: relative"><a href="indi.asp?id=04950" class="m" style="position: relative">
              <div style="display:inline-block; vertical-align:text-top; padding:30px 10px; position: relative">Child<br>
                2.4<span>(1902 - )</span></div>
              </a></li>
            <li style="position: relative"><a href="indi.asp?id=04950" class="m" style="position: relative">
              <div style="display:inline-block; vertical-align:text-top; padding:30px 10px; position: relative">Child<br>
                2.5<span>(1902 - )</span></div>
              </a></li>
            <li style="position: relative"><a href="indi.asp?id=04950" class="m" style="position: relative">
              <div style="display:inline-block; vertical-align:text-top; padding:30px 10px; position: relative">Child<br>
                2.6<span>(1902 - )</span></div>
              </a></li>
          </ul>
    </li>
    <li class="parent"><a href="" class="m">
      <div style="display:inline-block; vertical-align:central; padding:30px 10px; width:80px;">Husband<br>2<span>(1861 - 1894)</span></div>
      </a>
    </li>
  </ul>
</div>
</body>
</html>

和CSS：

.tree * {margin: 0; padding: 0;}

body {

    font-family: arial, verdana, tahoma;
    font-size: 12px;
    color: #666;
    background-color:#fff;

}

.tree{
    white-space:nowrap;
}

.tree ul {
    padding-top: 5px; position: relative;
    display: table;
    margin: 0 auto;
    font-size:0;

    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

.tree li {
    //float: left; 
    display:inline-block;
    text-align: center;
    list-style-type: none;
    position: relative;
    padding: 70px 5px 0 5px;
    font-size: 12px;

    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

/*We will use ::before and ::after to draw the connectors*/

.tree li::before, .tree li::after{
    content: '';
    position: absolute; top: 0; right: 50%;
    border-top: 1px solid #ccc;
    width: 50%; height: 70px;
}
.tree li::after{
    right: auto; left: 50%;
    border-left: 2px solid #ccc;
}

/*We need to remove left-right connectors from elements without 
any siblings*/
.tree li:only-child::after {
    display: none;
}

/*Remove space from the top of single children*/
//.tree li:only-child{ padding-top: 0;}

/*Remove left connector from first child and 
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
    border: 0 none;
}


/*Adding back the vertical connector to the last nodes*/
.tree li li:last-child::before{
    border-right: 2px solid #ccc;
    border-radius: 0 5px 0 0;
    -webkit-border-radius: 0 5px 0 0;
    -moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
    border-radius: 5px 0 0 0;
    -webkit-border-radius: 5px 0 0 0;
    -moz-border-radius: 5px 0 0 0;
}

.tree li li:only-child::before {
    right: auto; left: 50%;
    border-left: 2px solid #ccc;
    border-right:none;
}

.tree ul.p>li::before {
    border:none;
    content: '&';
    left:0;
    width:100%; 
    }

.tree ul.p>li::after{
    content: '';
    position: absolute; top: 0; right: 50%;
    border-top: none;
    width: 50%; height: 20px;
}

.tree ul.p>li::after{
    border-left: none;
}

/* Use pf to indicate that its a child of another family. */
.tree ul.pf>li::before {
    right: auto; left: 50%;
    border-left: 2px solid #ccc;
    border-right:none;
    }

.tree ul.pf>li::after{
    content: '';
    position: absolute; top: 0; right: 50%;
    border-top: none;
    width: 50%; height: 20px;
}

.tree ul.pf>li::after{
    border-left: none;
}



/*Time to add downward connectors from parents*/

.tree ul.c {
    padding-top: 70px; 
    }


.tree ul ul.c::before{
    content: '';
    position: absolute; top: 0; left: 50%;
    border-left: 2px solid #ccc;
    width: 0; height: 20px;
    border: none;
}

.tree li a{
    border: 1px solid #ccc;
    padding: 0px;
    text-decoration: none;
    color: #666;
    background-color:#fff;
    /*background-image:url(circle.jpg)*/
    /*color: #fff;
    background-color:#999;*/
    display: inline-block;
    min-width:50px;

    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;


    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

.tree li a span{
    display:block;
    font-size: 10px;

    }   

.tree li a.m{width:100px;height:100px;border-radius:15px;font-size:12px;color:#000;text-align:center;background: #c8e4fb; box-shadow:1px 1px 2px #000}
.tree li a.f{width:100px;height:100px;border-radius:50px;font-size:12px;color:#000;text-align:center;background: #ffc0cb; box-shadow:1px 1px 2px #000}
.tree li a.m_dead{width:100px;height:100px;border-radius:15px;font-size:12px;color:#000;text-align:center;background: #F1F9FE; box-shadow:1px 1px 2px #000}
.tree li a.f_dead{width:100px;height:100px;border-radius:50px;font-size:12px;color:#000;text-align:center;background: #FFF0F2;box-shadow:1px 1px 2px #000}
.tree li a.m_nolink{width:100px;height:100px;border-radius:15px;font-size:12px;color:#000;text-align:center;background: #c8e4fb; box-shadow:1px 1px 2px #000}
.tree li a.f_nolink{width:100px;height:100px;border-radius:50px;font-size:12px;color:#000;text-align:center;background: #ffc0cb; box-shadow:1px 1px 2px #000}
.tree li a.m_dead_nolink{width:100px;height:100px;border-radius:15px;font-size:12px;color:#000;text-align:center;background: #F1F9FE; box-shadow:1px 1px 2px #000}
.tree li a.f_dead_nolink{width:100px;height:100px;border-radius:50px;font-size:12px;color:#000;text-align:center;background: #FFF0F2;box-shadow:1px 1px 2px #000}

.tree li.marriage{width:200px;height:1px; border: 1px; border-color: #000; color: #000; border-style: solid; padding: 0 ; background: #000; position: relative;}
.tree li.marriage::before{border: none}
.tree  ul.pf>li.parent::before{border: none}
.tree  ul.pf>li.parentWithAncestor::before{border-top: none;}



.tree li a.m:hover{width:100px;height:100px;border-radius:15px;font-size:12px;color:#000;text-align:center;background: #c8e4fb; box-shadow:0 0 4px #222 inset}
.tree li a.f:hover{width:100px;height:100px;border-radius:50px;font-size:12px;color:#000;text-align:center;background: #ffc0cb; box-shadow:0 0 4px #222 inset}
.tree li a.m_dead:hover{width:100px;height:100px;border-radius:15px;font-size:12px;color:#000;text-align:center;background: #F1F9FE; box-shadow:0 0 4px #222 inset}
.tree li a.f_dead:hover{width:100px;height:100px;border-radius:50px;font-size:12px;color:#000;text-align:center;background: #FFF0F2; box-shadow:0 0 4px #222 inset}
4

1 回答 1

0

所以你想把阶级婚姻的孩子放在这个元素下面吗？

您必须使用位置左边距或负边距，因为子元素的边界，即 ul 元素，是具有较小宽度的元素 .marriage。

因此，我看不到任何其他机会，因为使用 position left 属性或负边距将元素水平居中定位。

但我不确定你的问题是否正确。

于 2012-12-03T23:18:22.487 回答