html – 具有名称长度的CSS系列树对齐问题

概述我开始使用 CSS3 Family Tree的实验性多父版本： http://thecodeplayer.com/experiment/css3-family-tree/2 但是,我与多个父母(家谱中的合作伙伴)存在一些对齐问题,这似乎是由框中文本的长度引起的.如果两个盒子具有相同长度的文本,则它们排成一行,否则较长的一个较高,并且高度的差异与长度的差异成比例. 此外,那里的任何孩子似乎都漂浮在左 我开始使用 CSS3 Family Tree的实验性多父版本： http://thecodeplayer.com/experiment/css3-family-tree/2

但是,我与多个父母(家谱中的合作伙伴)存在一些对齐问题,这似乎是由框中文本的长度引起的.如果两个盒子具有相同长度的文本,则它们排成一行,否则较长的一个较高,并且高度的差异与长度的差异成比例.

此外,那里的任何孩子似乎都漂浮在左边,而不是像他们应该的那样集中坐着.编辑：这部分已经回答了

这里的例子：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 >  <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 >                  <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 >                  <a href="#">Great Grandchild</a>                </li>              </ul>            </li>          </ul>        </li>      </ul>    </li>  </ul></div>

什么可能导致这个/如何解决它？

解决方法 添加缺少的垂直对齐方式.

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

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

总结

以上是内存溢出为你收集整理的html – 具有名称长度的CSS系列树对齐问题全部内容，希望文章能够帮你解决html – 具有名称长度的CSS系列树对齐问题所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。