How can one create horizontal tree view using CSS and HTML?
thanks for your interest, first I believe image is worth thousand word, so here you go
Unfortunately I am not in possession of mouse right now, so its drawn using IBM TrackPoint, but the main idea should be clear. I called it horizontal tree because usually tree view is vertical, you would only see one directory on one line and on the left hand side of the directory name would be just vertical lines showing how deeply nested this directory is. I am trying to have "directories" listed next to each other.
Think of it as of algorithm diagram with IFs and ENDIFs and they will always have exactly two outputs or inputs.
Now, I am trying to construct this with basic HTML elements and CSS and I thought at first that it will be piece of cake but it isn't, I spent whole afternoon on it with no luck. It will be generated by JS dynamically so I am trying to avoid tables. There could me any number of IFs, there will be exactly same amount of ENDIFs. There will be any number of other basic cells. The whole structure starts with one cell and ends with one cell
Here is html that should generate similiar picture:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IFs and ENDIFs</title>
<style>
ul, li, div{
margin: 0px;
padding: 0px;
border: 0px;
}
ul.left{
border: 1px solid red;
margin: 2px;
padding: 2px;
list-style-type:none;
width: 150px;
float:left;
}
ul.right{
border: 1px solid green;
margin: 2px;
padding: 2px;
list-style-type:none;
width: 150px;
float:left;
}
}
li.parent{
border: 1px solid blue;
background-color:#CC9;
margin: 2px;
padding: 2px;
min-width: 350px;
display:block;
overflow-style:marquee-block;
}
</style>
</head>
<body>
<div id="root">
<ul>
<li class="parent">
<div class="label">1</div>
<ul class="left">
<li>
<div class="label">1.L1</div>
</li>
<li>
<div class="label">1.L2</div>
</li>
<li class="parent">
<div class="label">1.L3</div>
<ul class="left">
<li>
<div class="label">1.L3.L1</div>
</li>
</ul>
<ul class="right">
<li>
<div class="label">1.L3.R1</div>
</li>
<li>
<div class="label">1.L3.R2</div>
</li>
</ul>
</li>
</ul>
<ul class="right">
<li>
<div class="label">1.R1</div>
</li>
<li>
<div class="label">1.R2</div>
</li>
<li class="parent">
<div class="label">1.R3</div>
<ul class="left">
<li>
<div class="label">1.R3.L1</div>
</li>
<li>
<div class="label">1.R3.L2</div>
</li>
<li>
<div class="label">1.R3.L3</div>
</li>
<li>
<div class="label">1.R3.L4</div>
</li>
</ul>
<ul class="right">
<li>
<div class="label">1.R3.R1</div>
</li>
<li>
开发者_JAVA技巧 <div class="label">1.R3.R2</div>
</li>
</ul>
</li>
</ul>
</li>
<li>
<div class="label">2</div>
</li>
<li>
<div class="label">3</div>
</li>
</ul>
</div>
</body>
</html>
Here is what it looks like so far :( (nothing near the result i hope for, also this is probably 7th iteration of me trying to figure this out) So if anyone could point me in the right direction I would really appreciate it.
HTML a linear data structure, but your graph you are trying to recreate isn't linear. While it is possible, it's not necessarily trivial.
You should avoid using float, because nested floats are a bit difficult to control. inline-block is probably a better solution here, however support is flaky in older browsers.
Have a look at an example I made, maybe you can build on that: http://jsfiddle.net/uf5uM/
加载中,请稍侯......
精彩评论