Html 名称长度的CSS家族树对齐问题

我从CSS3家谱的实验性多父版本开始：

但是，我与多个父母（家族树中的伙伴）存在一些对齐问题，这似乎是由框中文本的长度引起的。如果两个框的文本长度相同，则它们会对齐，否则越长的框越高，高度差与长度差成正比

此外，任何一个单独坐在那里的孩子似乎都会向左飘，而不是像他们应该坐的那样坐在中间编辑：此部分已回答

示例如下：

*{
保证金：0；
填充：0；
}
树胶{
填充顶部：20px；
位置：相对位置；
-webkit过渡：所有0.5s；
-moz转换：所有0.5s；
过渡：均为0.5s；
}
李先生{
浮动：左；
文本对齐：居中；
列表样式类型：无；
位置：相对位置；
填充：20px 5px 0 5px；
-webkit过渡：所有0.5s；
-moz转换：所有0.5s；
过渡：均为0.5s；
}
/*我们将使用：：before和：：after来绘制连接器*/
李树：以前，
李树：之后{
内容：“；
位置：绝对位置；
排名：0；
右：50%；
边框顶部：1px实心#ccc；
宽度：50%；
高度：65px；
z指数：-1；
}
李树：之后{
右：自动；
左：50%；
左边框：1px实心#ccc；
}
/*我们需要移除元素中的左右连接器，而不需要
有兄弟姐妹吗*/
李树：独生子：：之后，
李树：独生子：：以前{
显示：无；
}
/*删除单个子对象顶部的空间*/
李树：独生子女{
填充顶部：0；
}
/*从第一个子系统上拆下左侧接头并拆下
上一个子节点的右连接器*/
李树：第一个孩子：：之前，
李树：最后一个孩子：：之后{
边界：0无；
}
/*将垂直连接件添加回最后一个节点*/
李树：最后一个孩子：：之前{
右边框：1px实心#ccc；
边界半径：0 5px 0 0；
-webkit转换：translateX（1px）；
-moz变换：translateX（1px）；
转化：translateX（1px）；
-webkit边界半径：0 5px 0；
-moz边界半径：0 5px 0；
边界半径：0 5px 0 0；
}
李树：第一个孩子：：之后{
边界半径：5px0；
-webkit边界半径：5px 0；
-moz边界半径：5px 0；
}
/*从父级添加向下连接器的时间到了*/
.树ul：：以前{
内容：“；
位置：绝对位置；
顶部：-60px；
左：50%；
左边框：1px实心#ccc；
宽度：0；
高度：80px；
z指数：-1；
}
李树先生{
边框：1px实心#ccc；
填充物：5px10px；
文字装饰：无；
颜色：#666；
字体系列：arial、verdana、tahoma；
字体大小：11px；
显示：内联块；
背景：白色；
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
-webkit过渡：所有0.5s；
-moz转换：所有0.5s；
过渡：均为0.5s；
}
.李树a+a{
左边距：20px；
位置：相对位置；
}
.树李a+a：：之前{
内容：“；
位置：绝对位置；
边框顶部：1px实心#ccc；
最高：50%；
左-26px；
宽度：25px；
}
/*是时候使用一些悬停效果了*/
/*我们还将把悬停效果应用于元素的沿袭*/
李树答：悬停，
.树李a:悬停~ul李a{
背景：c8e4f8；
颜色：#000；
边框：1px实心#94a0b4；
}
/*悬停时的连接器样式*/
树李a:悬停~ul李：：之后，
树李a:悬停~ul李：：之前，
树李a：悬停~ul：：之前，
树李a：悬停~ul：：之前{
边框颜色：#94a0b4；
}
李树先生{
高度：60px；
宽度：60px；
}
.tree>ul>li>ul:之前{
顶部：-40px；
}
我的曾孙{
浮动：无；
}
}

向曾孙添加一个类，并将float设置为none，如下所示：

ul li.great-grandchild {
    float:none;
}

---

是指向添加缺少的垂直对齐的工作示例的链接

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