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>
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 some simple HTML and CSS to split a list into 4 columns. Instead of the normal behavior where it fits each list item into whichever column has enough space for it, I want to force it to put each list item into its own column.
So in my example <li>Column 1</li> will always only be in the 1st column. <li>Column 2<br>Column 2<br>Column 2<br>Column 2</li> will always only be in the 2nd column. Same with column 3 and 4.
Is there a way to accomplish this while using the columns property?
ul.data-points {
columns: 4;
column-gap: 20px;
}
<ul class="data-points">
<li>Column 1</li>
<li>Column 2<br>Column 2<br>Column 2<br>Column 2</li>
<li>Column 3</li>
<li>Column 4</li>
</ul>
This is more suitable for CSS grid:
ul.data-points {
display:grid;
grid-auto-flow:column;
column-gap: 20px;
}
<ul class="data-points">
<li>Column 1</li>
<li>Column 2<br>Column 2<br>Column 2<br>Column 2</li>
<li>Column 3</li>
<li>Column 4</li>
</ul>
as answered a couple of hours ago. at 2 column lists gets separated by its heading
set li to inline-block to avoid it to spray through columns and a bottom padding or margin to hopefully push next one to next column .
However, it looks like a typical grid or flex layout, not CSS Column .
demo below demonstrates how not efficient css column is here.
ul.data-points {
columns: 4;
column-gap: 20px;
}
li {display:inline-block;width:100%;margin-bottom:100%;}
<ul class="data-points">
<li>Column 1</li>
<li>Column 2<br>Column 2<br>Column 2<br>Column 2</li>
<li>Column 3</li>
<li>Column 4</li>
</ul>
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>
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]