Leader of heading and subheading with css
Leader of heading and subheading with css
I need to achieve following thing with css.
. Heading
|
|
|----Subheading
|--------|
|--------|
|--------|
|--------|----subHeading of subheading
|--------|--------------|
|--------|--------------|
|--------|--------------|
|--------|--------------|
|--------|--------------|--------SubHeading of subheading
Any one know name of this structure ?? or CSS to achieve this ?
what's wrong with the question?? Y'all are down voting it?
– Pardeep Sharma
Jun 30 at 13:28
@Paulie_D There are many input fields are placed under the heading. I need to show heading and subheading in this format. so that user can check where exactly they are in nested subheadings
– Pardeep Sharma
Jun 30 at 13:30
1 Answer
1
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="heading">
header
</div>
<div class="subheading">
subheader
</div>
<div class="subsubheading">
subsubheading
</div>
<div class="subsubsubheading">
subsubsubheading
</div>
<style>
.heading{
text-align: left;
float:left;
}
.subheading{
text-align:left;
float:left;
margin-top:100px;
}
.subsubheading{
text-align:left;
float:left;
margin-top:200px;
}
.subsubsubheading{
text-align:left;
float:left;
margin-top:300px;
}
</style>
</body>
</html>
Yes, you just need to use floats and margin-top like so.
margin-top
CSS
.heading{
text-align: left;
float:left;
}
.subheading{
text-align:left;
float:left;
margin-top:100px;
}
.subsubheading{
text-align:left;
float:left;
margin-top:200px;
}
.subsubsubheading{
text-align:left;
float:left;
margin-top:300px;
}
HTML
<div class="heading">
header
</div>
<div class="subheading">
subheader
</div>
<div class="subsubheading">
subsubheading
</div>
<div class="subsubsubheading">
subsubsubheading
</div>
Y'all are down voting it, but it works. Is there something I'm doing wrong?
– Francois van Kempen
Jun 30 at 13:14
I need that exact structure with that "|" and "." , your ans is not appropriate according to the question. But i am not the one who down voting you ans.
– Pardeep Sharma
Jun 30 at 13:35
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Looks like a nested set of lists to me,
– Paulie_D
Jun 30 at 10:17