0

複数の親オプションを持つ家系図を作成しようとしています。私は周りを見回しましたが、この側面を持つものは何も見つかりませんでした.

http://thecodeplayer.com/walkthrough/css3-family-treeから始めて、これを取得するために少し変更しました: http://www.gmrv.es/~sschvartzman/Sara_C._Schvartzman/prueba.html

結婚リンクは単に親のリストの別の要素ですが、身長は 0 です。今の私の問題は、結婚に関して子供たちを中心に置くことができないことです。つまり、この例では、再婚の子供は家族の権利に設定されています。子 2.1 と 2.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 に答える