There is a nested list, which looks like this:
Main-Title
Title 1
Element 1
Element 2
Element 3
Title 2
Element 4
HTML
<ul>
<li>Main Title
<ul>
<li>Title 1
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</li>
<li>Title 2
<ul>
<li>Element 4</li>
</ul>
</li>
</ul>
</li>
</ul>
Is it possible to display the list with CSS like this or do I have to change the HTML markup?
Main Title Title 1 Element 1
Element 2
Element 3
Title 2 Element 4
This looks more like a table with rowspan. I tried to do that with inline-flex:
CSS
li {
display: inline-flex;
}
But that doesn't work properly. Also there would be multiple elements like main title and so on.. the width of the 'cells' should be fixed.
JSFiddle: https://jsfiddle.net/mkc4uh9y/1/
This doesn't work for Safari.
And the list should be continued for multiple main elements. Here it will displayed to the right: https://jsfiddle.net/mkc4uh9y/4/
yes, reset sub li display:
li {
display: inline-flex;
}
li li {
display:flex;
}
https://jsfiddle.net/mkc4uh9y/2/
Related
I have multiple ul sections within my HTML document. Each one utilizes an unordered list of items. For one very specific ul within the HTML, I have a list of items like so:
<ul>
<li>item 1</li>
<li>item 2</li>
<li>ck-item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>ck-item 4</li>
<li>item 5</li>
<li>ck-item 5</li>
</ul>
I am trying to find a way to use CSS and classes, so that for any ul that requires multiple columns, I can force the list above to result in the following:
item 1
item 2 ck-item2
item 3
item 4 ck-item4
item 5 ck-item5
Basically, regardless of how short or long the actual text of say "item 2" is, I want the second column of ck-item2 to line up horizontally with any other ck-item#s within the second column. Essentially, a fixed amount of space between column 1 and 2, as if you were using a tab or something, so anything in column 2 lined up.
I have spent the past 8 hours trying to achieve this to no avail. It seems like it should be an easy thing to do, but ...
Any assistance provided is appreciated.
EDIT: Perhaps I wasn't clear. For example, I can do the following:
<ul>
<li>item 1</li>
<li>item 2 ck-item 2</li>
<li>item 3</li>
<li>item 4 ck-item 4</li>
<li>item 5 ck-item 5</li>
</ul>
Unfortunately, with this approach, depending on how long the actual test is for "item 2, item 4, and item 5", you could end up with output that looks like:
item 1
item 2 ck-item 2
item 3
item 4 ck-item 4
item 5 ck-item 5
So it looks really ugly. I hope that helps to explain what I am attempting to do.
You could use CSS Grid.
See the example below, with explanation following it:
.ul-table {
display: grid;
grid-template-columns: max-content max-content;
list-style-type: none;
padding: 0;
column-gap: 20px;
}
.ul-table li {
border: dashed 1px red;
white-space: nowrap;
}
.ul-table li.start-new-row {
grid-column-start: 1;
}
<ul class="ul-table">
<li class="start-new-row">item 1</li>
<li class="start-new-row">long item 2</li>
<li>ck-item 2</li>
<li class="start-new-row">very very long item 3</li>
<li class="start-new-row">item 4</li>
<li>ck-item 4</li>
<li class="start-new-row">item 5</li>
<li>ck-item 5</li>
</ul>
Explanation for the .ul-table style:
display: grid; Enables grid layout.
grid-template-columns: max-content max-content; Creates 2 columns, each just wide enough to contain the longest text present in that column.
column-gap: 20px = Spacing between columns.
And for the .start-new-row style:
grid-column-start: 1; Starts a new grid row.
I have an <ol> tag (ordered list) in my HTML document.
I would like it to display items in the following format:
(i) Item 1
(ii) Item 2
(iii) Item 3
Currently I have it working with the following HTML code:
<ol type="i">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
This gives me the following result:
i. Item 1
ii. Item 2
iii. Item 3
Is it possible to display my list in the desired way I mentioned at the beginning of this question?
EDIT: Follow up question which is also part of accepted answer
How can I get wrapped items (items that are too long for one line) to automatically start new lines on the same tab line?
Using only CSS3, you can do it as follows:
ol {
counter-reset: increment_var;
list-style-type: none;
}
li:before {
display: inline-block;
content: "(" counter(increment_var, lower-roman) ") ";
counter-increment: increment_var;
width: 40px;
margin-left: -40px;
}
li {
margin-left: 40px;
}
<ol>
<li>Example 1 Example 1 Example 1 Example 1 Example 1 Example 1 Example 1 Example 1 Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
<li>Example 4</li>
<li>Example 5</li>
</ol>
In my application I have a page which lists some data grouped by categories.
Each item on the list can have subitems.
So I'd it to look like this:
List item
1.1 List item
1.2 List item
List item
2.1 List item
2.2 List item
I can achieve this easily using this three lines of css code:
OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }
However on this page I have tabs for each category, which contains such nested list of items and I want to make index of first item of next tab to be x+1-th item, where x is number of last item from previous tab ( category ).
#tab 1
1. List item
1.1 List item
1.2 List item
2. List item
2.1 List item
2.2 List item
#tab 2
3. List item
3.1 List item
3.2 List item
4. List item
4.1 List item
4.2 List item
So I need functionality to provide starting index to <ol> tag. I found out that there is attribute start="x", however it doesn't work with these 3 lines of css code for nested lists.
Any idea how to do something like this?
Just remove the css, and correctly close and reopen <ol> tags.
If you need to split the list in two separate tabs, you have to close the first <ol> inside the first tab. Then, reopen the new list with the start parameter inside the second tab: <ol start="3">.
Working fiddle - (I set start="5" to show it's working; for your purposes, just set it to 3 or what you need)
UPDATE:
Keep the CSS, and wrap all the tabs in the main <ol> and </ol>, so the counter doesn't reset.
http://jsfiddle.net/qGCUk/227/
From http://www.w3.org/TR/css3-lists/#html4:
/* The start attribute on ol elements */
ol[start] {
counter-reset: list-item attr(start, integer, 1);
counter-increment: list-item -1;
}
Adding this to the CSS allowed the start attribute to be recognized in my tests.
EDIT:
Instead of using the start attribute, you can use CSS classes for each new starting point. The downside is that this will require more maintenance should you need to change anything.
CSS:
ol.start4
{
counter-reset: item 4;
counter-increment: item -1;
}
ol.start6
{
counter-reset: item 6;
counter-increment: item -1;
}
HTML:
<div>
<ol>
<li>Item 1</li>
<li>Item 2
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol></li>
<li>Item 3
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol></li>
</ol>
</div>
<div>
<ol class="start4">
<li>Item 4
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol></li>
<li>Item 5</li>
</ol>
</div>
<div>
<ol class="start6">
<li>Item 6</li>
<li>Item 7
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol></li>
</ol>
</div>
I have a menu like so:
<ul class="ipro_menu">
<li>Home</li>
<li class="active-parent">Menu Item 1
<ul class="sub-menu">
<li>Subitem 1</li>
<li class="active">Subitem 2</li>
</ul>
</li>
<li>Menu Item 2</li>
</ul>
The current page automatically gets the class active and if it is in a ul under the main ul (submenu), then the main ul element will get the class active-parent.
So, in the above example, we would be viewing the "Subitem 2" page, so "Menu Item 1" is given the class active-parent.
I am trying to change the font color of the active-parent ONLY- not all the submenu elements. Here's what I have:
ul.ipro_menu li.active-parent a {
color: #FF0000;
}
The problem is that this is changing not only the active-parent element, but all of the li's in the sub-menu as well.
How do I change this to only change the font color of the specific element marked active-parent?
That behavior is expected with CSS. The only way to override that style for children would be to use a separate (and more specific) style for those elements:
ul.ipro_menu li.active-parent ul.sub-menu li a {
color:#000;
}
Try putting the active-parent class on the HREF:
http://jsfiddle.net/RAkuc/
<ul class="ipro_menu">
<li>Home</li>
<li><a class="active-parent" href="/menu-item-1/">Menu Item 1</a>
<ul class="sub-menu">
<li>Subitem 1</li>
<li class="active">Subitem 2</li>
</ul>
</li>
<li>Menu Item 2</li>
</ul>
ul.ipro_menu a.active-parent {
color: #FF0000;
}
Use the direct children selector:
ul.ipro_menu li.active-parent > a {
color: #FF0000;
}
this will only affect direct descendants of your li element.
I am trying to override a CSS setting for lists in one of my pages. In my master CSS file, I have set the following rule:
ul, li { list-style-type: none; }
I have one page, where I DO want to set the style of the list - I would also like to increase the spacing between those list items on that single page.
The page looks like this:
<div><h3 style="color:#023467;">Hello</h3>
<ul style="color:#006699; list-style-type:circle;"> <!-- has no effect -->
<li>line 1</li>
<li>line 2</li>
<li>line 3</li>
<li>line 4</li>
</ul>
</div>
So far I have tried the following:
Adding the style to the containing UL tag
Adding the style BOTH to the containing UL tag and each LI tag
None has worked so far. Since I have over 1K pages referencing the main.css file, I do not want to change it. But how can I override the settings for the specific list items in my page?
Why am I not able to override the settings in my main.css if even I apply the style at the element itself?
Add this to your CSS file:
ul.circle, ul.circle > li { list-style-type: circle; }
Use this markup:
<div><h3 style="color:#023467;">Hello</h3>
<ul class="circle" style="color:#006699;">
<li>line 1</li>
<li>line 2</li>
<li>line 3</li>
<li>line 4</li>
</ul>
</div>
Make sure that no other rules set ul list-style-type.