looking for some code to wrap a li items in a div with a set height.
When list items dont fit the height it will spill over to the right.
also looking to align them to the left of that div with bullet point still visible.
would also be nice if you would be able to control the "space" in between so it doesn't look squished.
I wrote the code how i would like it displayed knowing it wont. hopefully it helps to explain what i am after.
<div>
<ul>
<li> 1</li> (space) <li> 4</li> (space) <li> 7</li>
<li> 2</li> (space) <li> 5</li> (space) <li> 8</li>
<li> 3</li> (space) <li> 6</li> (space) <li> 9</li>
</ul>
</div>
You can use column-count for this. Check snippet below..
for detail you can take reference from https://www.w3schools.com/css/css3_multiple_columns.asp
ul {
list-style: none;
column-count: 3;
-moz-column-count: 3;
-webkit-column-count: 3;
}
ul li {
display: block;
padding: 10px 0;
}
<ul>
<li> 1</li>
<li> 2</li>
<li> 3</li>
<li> 4</li>
<li> 5</li>
<li> 6</li>
<li> 7</li>
<li> 8</li>
<li> 9</li>
</ul>
Related
I'm trying to create a mega-menu. I'm using a list element and some elements have divs inside.
This is what my HTML looks like:
<li class="list-item">
Marchés
<div class="sub-menu-wrap">
<ul class="sub-menu">
<li>Marché 1</li>
<li>Marché 2</li>
<li>Marché 3</li>
<li>Marché 4</li>
<li>Marché 5</li>
<li>Marché 6</li>
</ul>
</div>
</li>
The li with .list-item class has position:relative; and the .sub-menu-wrapper has position:absolute; and width:100%;
i need the .sub-menu-wrap to have a full screen width but it's only taking the li.list-item width (screenshot below).
I also tried left:0;right:0; for .sub-menu-wrap but nothing changed..
When recreating your code, the element positioned absolute does in fact take up 100% width when the width is set to 100%. Double check your syntax. See my snippet below, the element positioned absolute is taking up the full width.
.list-item{
position: relative;
background: lightcoral;
width: 100px;
}
.sub-menu-wrap{
position:absolute;
background-color: lightblue;
width: 100vw;
}
<li class="list-item">
Marchés
<div class="sub-menu-wrap">
<ul class="sub-menu">
<li>Marché 1</li>
<li>Marché 2</li>
<li>Marché 3</li>
<li>Marché 4</li>
<li>Marché 5</li>
<li>Marché 6</li>
</ul>
</div>
</li>
I've done a few things with css columns and I really like them, but today I stumbled into a problem for which I just won't find a solution:
I have a page with multiple lists. These lists have dynamic contents and open up in small popups. The old behaviour was, that the list contents have been shown in a single column (normal HTML <ul>). The new behaviour should be that they are displayed in up to 4 columns. So I have extended my CSS with ul { column-count: 4; }. This works pretty nice for lists with many entries.
Now to my problem: sometimes there are lists with less then 4 entries. If that's the case, the popups for the lists still span 4 columns, with only 2 columns filled. So the popup for the less-filled list is still as wide as a popup with a full-filled list. For example:
ul {
background-color: lime;
list-style: none;
column-count: 4;
}
<ul>
<li>entry 1</li>
<li>entry 2</li>
<li>entry 3</li>
<li>entry 4</li>
<li>entry 5</li>
<li>entry 6</li>
<li>entry 7</li>
<li>entry 8</li>
<li>entry 9</li>
<li>entry 10</li>
<li>entry 11</li>
<li>entry 12</li>
</ul>
<ul>
<li>entry 1</li>
<li>entry 2</li>
</ul>
My question now is: How do I hide those empty columns? I want a popup with a less filled list (no. of entries < 4) to be less wide then a popup with a full-filled list. I'd like to find a CSS-only solution, as I didn't intend to count the entries and add extra classes to decrease the column-count.
The order in which the elements are displayed is important: top-down and then left-right.
I've tried using flexbox, but there I have to set a fixed width for the container, which just results in the popups being too wide as well.
Edit for clarification:
The dotted line should be the right border for the second popup.
The diagonal lines mark the empty space I need to be gone.
Edit further approaches:
Another approach posted by user 'Gobbin' as answer, is to use flex. But as I mentioned, I'd have to set some fixed width. Here it is a max-width for the list itself, so that wrapping works and a fixed width for the list elements. I don't want to have either. Also this approach lists the items from left to right and then from top to bottom, which is also not what I need:
ul {
list-style: none;
display: inline-flex;
flex-wrap: wrap;
max-width: 16em;
float: left;
clear: both;
}
li {
background-color: lime;
width: 4em;
}
<ul>
<li>entry 1</li>
<li>entry 2</li>
<li>entry 3</li>
<li>entry 4</li>
<li>entry 5</li>
<li>entry 6</li>
<li>entry 7</li>
<li>entry 8</li>
<li>entry 9</li>
<li>entry 10</li>
<li>entry 11</li>
<li>entry 12</li>
</ul>
<ul>
<li>entry 1</li>
<li>entry 2</li>
</ul>
Maybe this is an option for you, although the columns are spread across the available width.
var maxColumns = 4;
$("ul").each(function() {
var numColumns = $(this).find("li").length;
$(this).css("column-count", numColumns);
$(this).css("width", 25*numColumns + "%");
});
ul {
background-color: lime;
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>entry 1</li>
<li>entry 2</li>
<li>entry 3</li>
<li>entry 4</li>
</ul>
<ul>
<li>entry 1</li>
<li>entry 2</li>
</ul>
I think this is your desired layout. Edited my answer as the list items still had margins.
ul {
list-style: none;
display: inline-flex;
float: left;
clear: both;
}
li{
background-color: lime;
width: 100%;
display: inline;
}
<ul>
<li>entry 1</li>
<li>entry 2</li>
<li>entry 3</li>
<li>entry 4</li>
</ul>
<ul>
<li>entry 1</li>
<li>entry 2</li>
</ul>
I have an unordered list with bullets, but the first li I want without a bullet
I can't figure out how I can just one item without a bullet
<ul>
<li class="no_bullet"> item 0 </li>
<li>item 1 </li>
<li>item 2 </li>
<li>item 3 </li>
</ul>
you can do like this:
using first-child/first-of-type, no need for extra markup (using class)
li:first-child {
list-style: none
}
<ul>
<li>item 0 </li>
<li>item 1 </li>
<li>item 2 </li>
<li>item 3 </li>
</ul>
if you need to remove the bullet from just this specific list, then set a class to ul and do it like this:
.list-no-bullet li:first-child {
list-style: none
}
<ul class="list-no-bullet">
<li>item 0 </li>
<li>item 1 </li>
<li>item 2 </li>
<li>item 3 </li>
</ul>
You can do this with the list-style property
li:first-child {
list-style: none;
}
<ul>
<li>item 0</li>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
You can also replace first-child with nth-child(index), if you want to select a specific item that isn't first or last, e.g.
li:nth-child(3) {
list-style: none;
}
To remove a bullet you would use list-style: none. There are a number of other valid styles you could also use including roman numerals, images and positioning of the bullet: MDN
.no_bullet {
list-style: none;
}
<ul>
<li class="no_bullet"> item 0 </li>
<li>item 1 </li>
<li>item 2 </li>
<li>item 3 </li>
</ul>
I have a simple list:
<ul>
<li>Test</li>
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
<li>Test6</li>
<li>Test7</li>
</ul>
I'd like to give all <li> a color of red except for the 5 + 6
http://jsfiddle.net/7yDGg/1/
Can this be done using only one selector?
Use css selector :not(target) to explicitly select which child is going to be excluded. replace the target with another selector.
We can combine selector :not() and :nth-child() to exclude specific elements.
For example in this case, we want to exclude the 5th and 6th element, then use this: :not(:nth-child(5)) and :not(:nth-child(6)).
ul li:not(:nth-child(5)):not(:nth-child(6)) {
color: red;
}
<ul>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
<li>Test 5</li>
<li>Test 6</li>
<li>Test 7</li>
</ul>
The easiest way is this:
ul li {
color: red;
}
ul li:nth-child(5), ul li:nth-child(6) {
color: black;
}
fiddle updated.
I have a menu element like:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ul>
<li>SubItem 1</li>
<li>SubItem 2</li>
<li>SubItem 3</li>
</ul>
</li>
<li>Item 4</li>
</ul>
The element is positioned absolutely. How can I center it without knowing its width (number of parent elements might change).
Regards,
Dave
I think what you're after is possible if you have a parent element to the ul:
<div class="example">
<ul>
<!-- lots of li's -->
</ul>
</div>
Then use the old school text-align trick that was used to center layouts:
.example {
text-align: center;
}
.example ul {
text-align: left;
display: inline-block;
}
See: http://jsfiddle.net/chippper/WK5Z4/