CSS系列树对齐问题与名称长度 [英] CSS family tree alignment issues with name length

问题描述

我开始使用CSS3 Family Tree的实验性多版本版本： http：/ /thecodeplayer.com/experiment/css3-family-tree/2

I started with the experimental multi-parent version of the CSS3 Family Tree: http://thecodeplayer.com/experiment/css3-family-tree/2

但我有多个家长的比对问题 （家谱中的合作伙伴），这似乎是由文本框中的长度引起的。如果两个框具有相同长度的文本，它们排列，否则较长的文本较高，并且高度差与长度差成比例。

However I am having some alignment issues with multiple parents (partners in a family tree), which seem to be caused by the length of the text in boxes. If two boxes have the same length text they line up, otherwise the longer one is higher, and the difference in height is proportional to the difference in length.

孩子在自己似乎漂浮到左边，而不是坐在中央，因为他们应该。 编辑：已解答此部分

Also, any child on there own seems to float off to the left rather than sitting centrally as they should. THIS PART HAS BEEN ANSWERED

此处的示例： http://jsfiddle.net/7g7fz2tL/5/

* {
  margin: 0;
  padding: 0;
}

.tree ul {
  padding-top: 20px;
  position: relative;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}

.tree li {
  float: left;
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0 5px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  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: 65px;
  z-index: -1;
}

.tree li::after {
  right: auto;
  left: 50%;
  border-left: 1px solid #ccc;
}
/*We need to remove left-right connectors from elements without 
any siblings*/

.tree li:only-child::after,
.tree li:only-child::before {
  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:last-child::before {
  border-right: 1px solid #ccc;
  border-radius: 0 5px 0 0;
  -webkit-transform: translateX(1px);
  -moz-transform: translateX(1px);
  transform: translateX(1px);
  -webkit-border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  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;
}
/*Time to add downward connectors from parents*/

.tree ul ul::before {
  content: "";
  position: absolute;
  top: -60px;
  left: 50%;
  border-left: 1px solid #ccc;
  width: 0;
  height: 80px;
  z-index: -1;
}

.tree li a {
  border: 1px solid #ccc;
  padding: 5px 10px;
  text-decoration: none;
  color: #666;
  font-family: arial, verdana, tahoma;
  font-size: 11px;
  display: inline-block;
  background: white;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}

.tree li a+a {
  margin-left: 20px;
  position: relative;
}

.tree li a+a::before {
  content: "";
  position: absolute;
  border-top: 1px solid #ccc;
  top: 50%;
  left: -26px;
  width: 25px;
}
/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/

.tree li a:hover,
.tree li a:hover~ul li a {
  background: #c8e4f8;
  color: #000;
  border: 1px solid #94a0b4;
}
/*Connector styles on hover*/

.tree li a:hover~ul li::after,
.tree li a:hover~ul li::before,
.tree li a:hover~ul::before,
.tree li a:hover~ul ul::before {
  border-color: #94a0b4;
}

.tree li a {
  height: 60px;
  width: 60px;
}

.tree > ul > li > ul:before {
  top: -40px;
}
.tree ul li.great-grandchild {
    float: none;
}
}

<div class="tree">
  <ul>
    <li>
      <a href="#">Root</a>
      <ul>
        <li>
          <a href="#">Child with name</a>
          <a href="#">Child with name</a>
          <ul>
            <li>
              <a href="#">Grandchild with name</a>
              <a href="#">Grandchild with longer name</a>
              <ul>
                <li class="great-grandchild">
                  <a href="#">Great Grandchild</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">Grandchild with name</a>
              <a href="#">Grandchild with much longer name</a>
              <ul>
                <li class="great-grandchild">
                  <a href="#">Great Grandchild</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

推荐答案

添加缺少的垂直对齐方式。

Adding the missing vertical alignment.

http://jsfiddle.net/7g7fz2tL/6/

.tree li a {
  height: 60px;
  width: 60px;
  vertical-align: top; /*THIS*/
}

这篇关于CSS系列树对齐问题与名称长度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！