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>
Related
ol {
counter-reset: item;
}
ol>li {
counter-increment: item;
}
<ul>
<li>ul 1 test 1</li>
<li>ul 1 test 2</li>
<li>ul 1 test 3</li>
</ul>
<ol>
<li>ol 1 test 1</li>
<li>ol 1 test 2</li>
<li>ol 1 test 3</li>
</ol>
<ul>
<li>ul 2 test 1</li>
<li>ul 2 test 2</li>
<li>ul 2 test 3</li>
</ul>
<ol>
<li>ol 2 test 1</li>
<li>ol 2 test 2</li>
<li>ol 2 test 3</li>
</ol>
<ol>
<li>ol 3 test 1</li>
<li>ol 3 test 2</li>
<li>ol 3 test 3</li>
</ol>
You can test this out in your different browsers Chrome & Firefox and it will give you different results..
In firefox the counter doesn't get reset and continues counting on the amount of <li> elements in the <ul> element.
In Chrome there is no problem.
Is this a bug in Firefox?
Should I use counter-set instead? This seems to be working. What is the difference?
Should I add counter-reset to the unordered list? This also seems to be working.
I have an html list that I need to get split into two columns. I'm curious if I can do this purely in CSS without changing the HTML code.
For example:
I have a list like this:
Item 1
Item Longer 2
Item really long 3
Item this 4
Item five 5
Item 6
But I want to display the list as two columns with equal width, but without changing the HTML code.
I've tried using child selectors and inline display but I can't figure out how to get the second column to start evenly.
This is what I'm trying to achieve in CSS. That way if I keep adding to the list, it keeps alternating the content between columns, as well as always having the second column be even.
li {
display: inline;
}
<ul>
<li>Item 1</li>
<li>Item Longer 2</li>
<li>Item really long 3</li>
<li>Item this 4</li>
<li>Item five 5</li>
<li>Item 6</li>
</ul>
https://jsfiddle.net/u85avecb/
Try using a flexbox.
ul {
display: flex;
flex-direction: column;
list-style: none;
max-height: 60px;
flex-wrap: wrap;
}
<ul>
<li>Item 1</li>
<li>Item Longer 2</li>
<li>Item really long 3</li>
<li>Item this 4</li>
<li>Item five 5</li>
<li>Item 6</li>
</ul>
You can use columns like this without changing your html code :
ul {
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
}
<ul>
<li>Item 1</li>
<li>Item Longer 2</li>
<li>Item really long 3</li>
<li>Item this 4</li>
<li>Item five 5</li>
<li>Item 6</li>
</ul>
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>
I have a problem with displaying a big ordoned list. Here I wrote just for 1000, but imagine how will look for 100000 elements.
Anyway maybe that won't be a problem to big, but after 9999, the 1 from 10000 get hidden.
1. Element 1
2. Element 1
10. Element 10
100. Element 100
1000. Element 1000
To avoid that I would like to display it like:
1. Element 1
2. Element 1
10. Element 10
100. Element 100
1000. Element 1000
I tried to put float:right on li and ol li but didn't help.
Is there any css trick that can help with this?
.list ol li {
margin-left:55px;
}
//margin-left:55px to avoid hidding first digit. Ugly method, I know.
.list ol li {
float:right;
position:relative;
}
.list is the class containing this ordoned list.
Use this to left align the ordered list -
HTML:
<ol>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
<li>Element 6</li>
<li>Element 7</li>
<li>Element 8</li>
<li>Element 9</li>
<li>Element 10</li>
<li>Element 11</li>
</ol>
CSS:
ol{ list-style-position: inside;}
Cheers!!!
Demo
You can use list-style as
ol {
list-style: <list-style-type> || <list-style-position> || <list-style-image>;
}
You need list-style-position : inside as below
ol {
list-style:decimal inside none;
}
Read here for more details
ul{border:1px solid red;padding:0;margin:0;list-style:decimal inside;position:relative;}
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
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]