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>
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.
This question already has answers here:
Is there a way to break a list into columns?
(10 answers)
Closed 3 years ago.
I have a list with ul li like this
Item line 1
Item line 2
Item line 3
Item line 4
Item line 5
Item line 6
Item line 7
Item line 8
Item line 9
Item line 10
Item line 11
Item line 12
And I need to change to this, its possible only with CSS ?
Item line 1 Item line 5 Item line 9
Item line 2 Item line 6 Item line 10
Item line 3 Item line 7 Item line 11
Item line 4 Item line 8 Item line 12
Regards
Daniel
Use columns on the <ul>.
ul {
columns: 3;
}
<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>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
</ul>
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 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]