- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想在这个 fiddle 中的一个节点上结束两个节点 http://jsfiddle.net/uPdZX
HTML代码:
<!--
We will create a family tree using just CSS(3)
The markup will be simple nested lists
-->
<div class="tree">
<ul>
<li>
<a href="#">Parent</a>
<ul>
<li>
<a href="#">Child</a>
<ul>
<li>
<a href="#">Grand Child</a>
</li>
</ul>
</li>
<li>
<a href="#">Child</a>
<ul>
<li><a href="#">Grand Child</a></li>
<li>
<a href="#">Grand Child</a>
<ul>
<li>
<a href="#">Great Grand Child</a>
</li>
<li>
<a href="#">Great Grand Child</a>
</li>
<li>
<a href="#">Great Grand Child</a>
</li>
</ul>
</li>
<li><a href="#">Grand Child</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
CSS:
/*Now the CSS*/
* {margin: 0; padding: 0;}
.tree ul {
padding-top: 20px; position: relative;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.tree li {
float: left; text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;
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: 20px;
}
.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-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;
}
/*Time to add downward connectors from parents*/
.tree ul ul::before{
content: '';
position: absolute; top: 0; left: 50%;
border-left: 1px solid #ccc;
width: 0; height: 20px;
}
.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;
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;
}
/*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;
}
这是代码......我想做的是结束一个孙子的孙子......如何实现这一点......我应该做什么......任何帮助将不胜感激: )
最佳答案
如果您删除以下 CSS3 语句(或将内边距设置为 20px),它们将处于同一级别:
/*Remove space from the top of single children*/
.tree li:only-child{ padding-top: 0;}
不过,您仍需要添加一个额外的垂直连接器(如果需要)。
关于html - 在家谱中的单个节点上结束两个节点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16466277/
我做到了,但它没有显示答案 当我询问兄弟,姐妹,叔叔,阿姨时 这是我写的,有什么问题吗? /*uncle(X, Y) :– male(X), sibling(X, Z), parent(Z, Y).*
我即将参加考试,需要有关家谱的考试问题的帮助。我以前做过树,但只有这种格式: 数据树 a = 空 |叶一个 |节点a(树a)(树a) 基本上,一棵树要么是空节点,要么是叶节点,或者是一个有两棵树递归跟
有没有办法让子元素跟随其父元素? 问题是,如果只有一个子节点,而父节点有一大段文本,连接器的位置就会变得非常糟糕。我该如何解决? Fiddle demo * {margin: 0; padding:
我正在尝试存储家谱。这是我使用的平台,Zend framework, Mysql, Ajax我搜索了 stackoverflow 我遇到了这篇文章,它对处理对象方面的数据非常有帮助。 "Family
家谱中家谱的算法是怎么做的? 例如 parent A有一个 child B和C。那么,如果 child C将来也生了一个 child 怎么办。它如何使用数据库添加到树中? 我看过 Jit 的 RGra
我对这个任务一无所知。我需要像这样制作家谱 但我无法解决 Main.java 中的 child 问题。对于每个名字,我都必须给 child 写 null 。 这是我的代码:Main.java 。第二个
我使用 CSS 创建了一个家谱。 家谱可以正常工作,但问题是如果一行中的列表太多,它会在行的右端断开该行,并在新行上显示。 如何在不破坏子元素的情况下使这个家谱水平延伸?即使我在页面底部没有水平滚动条
它来 self 的家庭作业。有家谱 a + b / | | \
正如您在下面的代码片段中所看到的,家谱显示得不是很好。那是因为容器不够宽,装不下它。我想通过向容器添加滚动条来解决这个问题,但不幸的是,这不起作用。我在列表中尝试了 nowrap,但无济于事。我有什么
已关闭。此问题旨在寻求有关书籍、工具、软件库等的建议。不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题,
我正在尝试用 PHP 做一个传销项目。现在我陷入了 MLM 的二叉树表示。请帮我实现这棵树。 sample tree structre .请帮我在附加图片上构建一个树状结构。 Sample tree
需要帮助!是否可以将此网络树居中 http://bvusolutions.com/tree2.html加载页面后?我还想将它放在 960px 宽度的 div 中,以避免滚动并具有缩放功能。 每次我添加
我是一名优秀的程序员,十分优秀!