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>
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'd like to have an ordered list with a closing bracket after each decimal like so:
1.) Item 1
2.) Item 2
3.) Item 3
My problem is that any code I can find changes all lists in a document, but I'd like to have the brackets only for specific lists.
I tried to create a class, but apparently "ol" doesn't accept "classes", or does it?.
Here's the code I have so far, which results in every list receiving brackets:
<style>
ol > li::marker {
content:counter(list-item) ") ";
}
</style>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<ol>
ol certainly supports classes, your implementation must be incorrect somewhere.
ol.braces>li::marker {
content: counter(list-item) ".) ";
color: red;
}
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<ol class="braces">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have unordered list:
-Item1-
-Item2Item2-
Item3Item3Item
Each element has different length.
I want to create list in which all items had the same long background color with text aligned like:
-----------------
-----Item1-------
-----------------
-----------------
---Item2Item2----
-----------------
-----------------
-Item3Item3Item3-
-----------------
Here --- is colored background. How can I do it?
Setting the display of the ul to inline-block or block and setting the width to auto will make the items fit to the widest of the options.
ul {
width: auto;
padding: 0;
margin: 0;
display: inline-block;
float: left;
clear: both;
}
li {
background: lightblue;
width: 100%;
padding: 10px;
text-align: center;
list-style: none;
margin-bottom: 10px;
}
<ul>
<li>Item 1</li>
<li>Item 2 Item 2</li>
</ul>
<ul>
<li>Item 1</li>
<li>Item 2 Item 2</li>
<li>Item 3 Item 3 Item 3</li>
<li>Item 4 Item 4 Item 4 Item 4</li>
</ul>
<ul>
<li>Item 1</li>
<li>Item 2 Item 2</li>
<li>Item 3 Item 3 Item 3</li>
<li>Item 4 Item 4 Item 4 Item 4</li>
<li>Item 5 Item 5 Item 5</li>
<li>Item 6 Item 6 Item 6 Item 6 Item 6</li>
</ul>
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 list of items (<ul> containing <li>'s) which I want to limit by height.
Let's say I have the following code:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
This will display as such:
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
I would like it to display like this:
Item 1 Item 4
Item 2 Item 5
Item 3 Item 6
Is there a way to achieve this without tables and without using different <ul> tags?
I'm looking for something like this - <ul limit="3"> but I don't mind limiting it by height (i.e. <ul limit="60px">)
The reason I want this functionality is that I am generating the <li> tags dynamically.
I'm using Ruby on Rails - if this isn't possible with simply XHTML and CSS - is there a way to achieve this is Rails without literring the view?
Is the ordering a hard requirement? If the width of the items is a known, you can do this:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
CSS:
ul { width: 100px; }
li { width: 50px; display: block; float: left; }
That will render like this:
Item 1 Item 2
Item 3 Item 4
Item 5 Item 6
I can answer for the XHTML/CSS part: no, sadly, not yet. In the future, we will have CSS columns. Breaking it up into different lists is how I'm aware of this typically being done now.
Update There is this: http://www.alistapart.com/articles/multicolumnlists/ which gives a number of ways of doing it, but I'm not sold on them, especially for programmed output.
To get your array sorted in the correct order to use the floating solution:
a = [1,2,3,4,5,6,7,8]
a.partition{|el|el % 2 == 1}.flatten
a => [1,3,5,7,2,4,6,8]