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>
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>
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'm brushing up on my CSS skills by going through these challenges, and I'm having trouble with the very first one (see image below).
strong text
I can center the text, but the bullets aren't getting centered with it. See JSFiddle
li {
text-align:center;
}
<ul>
<li>List Number 1</li>
<li>List Number 2</li>
<li>List Number 3</li>
<li>List Number 4</li>
<li>List Number 5</li>
</ul>
The easiest way might be setting list style position to inside.
li {
list-style-position: inside;
text-align: center;
}
<ul>
<li>List Number 1</li>
<li>List 2</li>
<li>List Number 3</li>
<li>List 4</li>
<li>List Number 5</li>
</ul>
Add this code in your css its work.
li {
text-align:center;
list-style-type:none;
}
li:before{
content:'\2022';
margin-right:5px;
}
Here is Demo : http://jsfiddle.net/gyQ2W/1/
Use :before pseudo-element. As content in it you can put images, HTML caracters, etc... Updated your fiddle
https://jsfiddle.net/shbfsoq6/2/
How to set numbering list with a custom number like this:
1). Item
2). Item
a). Sub Item
b). Sub Item
Please help....
You just need to add a list into another list, just like this:
<ol id="main">
<li>Item 1</li>
<li>Item 2</li>
<ol>
<li>Item 3.1</li>
<li>Item 3.2</li>
</ol>
</ol>
than you can change what is in front of each item by CSS. For example like this:
ol#main {
list-style-type: decimal;
}
ol#main > ol {
list-style-type: lower-alpha;
}
more about list-style-type property: http://www.w3schools.com/cssref/pr_list-style-type.asp
more about list-style property: http://www.w3schools.com/cssref/pr_list-style.asp