I have a simple list and want to use list-style-image to set the images for the list-items. I have set text-align: center on the list items because i want the list items to be on the center of the screen along with the list-images.
This works exactly how I want it to work in firefox. But in chrome the list-style-images are aligned to the far-left of the screen. Any idea why this is caused and how can I fix this bug on chrome?
I have made a JSFiddle here and you can see how i want it to appear on firefox and the issue on chrome:
https://jsfiddle.net/jhchmo5w/1/
<div class="discover-content">
<ul>
<li>List Item 1</li>
<li>List Item Item 2</li>
<li>List Item Item Item 3</li>
<li>List 4</li>
<li>List Item b 5</li>
<li>List Item cd 6</li>
</ul>
</div>
.discover-content ul li {text-align: center;}
.discover-content ul li {
margin-top: 9px;
padding-left: 12px;
list-style: none;
list-style-position: outside;
list-style-image: url(http://www.expertfrontend.com/icons/tick-red.png);
text-align: center;
}
list-style-position: inside; will work well both for Chrome and Firefox.
Just remove list-style-position:outside and add list-style-position:inside to get the images and text on centre.
Check this out...
.discover-content ul li {
text-align: center;
}
.discover-content ul li {
margin-top: 9px;
padding-left: 12px;
list-style: none;
list-style-image: url(http://www.expertfrontend.com/icons/tick-red.png);
list-style-position: inside;
text-align: center;
}
<div class="discover-content">
<ul>
<li>List Item 1</li>
<li>List Item Item 2</li>
<li>List Item Item Item 3</li>
<li>List 4</li>
<li>List Item b 5</li>
<li>List Item cd 6</li>
</ul>
</div>
Related
I have a simple flexbox list like this...
ul {
display:flex;
}
li {
background:red;
padding:10px;
margin:10px;
list-style:none;
}
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
</ul>
When there is not enough room for the list to be displayed horizontally then I would like it to display vertically.
Is there a way in flexbox to tell it to display vertically instead of wrap when there is not enough space?
I suggest you to use media queries alongside with flex direction property.
change the flex direction of the ul tag with a media query
ul {
display: flex;
#media (max-width: <Xpx>){
flex-direction: column
}
}
Xpx - The position you want to stack it vertically.
Use this trick
ul li:nth-last-child(n+6):first-child,
ul li:nth-last-child(n+6):first-child ~ *{
// set new style in case you have 5 li or more
}
Working code
ul {
display: flex;
flex-wrap: wrap;
}
li {
background:red;
padding:10px;
margin:10px;
list-style:none;
}
ul li:nth-last-child(n+6):first-child,
ul li:nth-last-child(n+6):first-child ~ *{
flex: 1 1 100%;
}
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 4</li>
<li>List Item 5</li>
</ul>
<h1>Same style with 5 items or less</h1>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
</ul>
Use media-queries to set different properties at a different width,
and play a game at https://flexboxfroggy.com/ to master flexbox.
To generate a media query for a specific screen resolution visit
http://giona.net/tools/css3-mediaquery-generator/
Hope this helps
Is it possible to create an ordered list with positive to negative without zero using only CSS?
Example:
3. Highest
2. Higher
1. High
-1. Low
-2. Lower
-3. Lowest
I understand the presentation is highly unusual. The intent is to create, with one field, a list of most and least favorites.
Some technical background: The field is generated in Joomla! CMS via FLEXIcontent's Text Field. The field is configured to be able to take multiple entries, and is restricted to only be able to take an even number of entries. The user is required to input an equal number of pros and cons for the given field. I'd like to be able to control everything exclusively in CSS so I don't have to create template overrides, if at all possible.
I've chosen this approach as I don't want to require multiple fields for one set.
I've found various resources for styling the numbers. I believe the following wouldn't work as I'd have to control some factors with PHP or there's limits to the markup:
<ol>
<li value=#>List Item</li> <!--needs value populated by PHP-->
</ol>
<ol reversed> <!--Stays positive and ends at 1-->
<li>Reversed List</li>
</ol>
<ol reversed start=2> <!--Can I control where to start based on number of children?-->
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
</ol>
If the task is completely impossible, it may be more practical to style based on number of children and color the first and last half differently. Still, it'd be very interesting to see if this is possible with CSS exclusively.
Great question! This is something a little different and an interesting example of what CSS can do.
See the code below for a solution to your problem. If you are using SASS you could easily create a mixin to generate all the selectors you need.
By using CSS counters you can fake the list number and then use nth-child to reset the counter to avoid displaying a 0 item.
Solution with a starting number
ol {
list-style: none;
margin: 0;
padding: 0 0 0 1.5em;
}
ol[start="1"] {
counter-reset: ol 2;
}
ol[start="1"] li:nth-child(2) {
counter-reset: ol 0;
}
ol[start="2"] {
counter-reset: ol 3;
}
ol[start="2"] li:nth-child(3) {
counter-reset: ol 0;
}
ol[start="3"] {
counter-reset: ol 4;
}
ol[start="3"] li:nth-child(4) {
counter-reset: ol 0;
}
ol li::before {
counter-increment: ol -1;
content: counter(ol) '.';
text-align: right;
margin: 0 .5em 0 -1.5em;
display: inline-block;
width: 1em;
}
<h2>Start at 1</h2>
<ol start="1">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
<li>List item 6</li>
</ol>
<h2>Start at 2</h2>
<ol start="2">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
<li>List item 6</li>
</ol>
<h2>Start at 3</h2>
<ol start="3">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
<li>List item 6</li>
</ol>
Solution without starting number but with same number of positive and negative list items
If you want this to work without having to add the start attribute to the ol and always have the same number of positive and negative list items you can use this CSS - but again it requires that you write it out the selectors for all the required numbers of items.
ol {
list-style: none;
margin: 0;
padding: 0 0 0 1.5em;
}
/* two items */
ol li:nth-child(1):nth-last-child(2) {
counter-reset: ol 2;
}
ol li:nth-child(2):nth-last-child(1) {
counter-reset: ol 0;
}
/* fouritems */
ol li:nth-child(1):nth-last-child(4) {
counter-reset: ol 3;
}
ol li:nth-child(3):nth-last-child(2) {
counter-reset: ol 0;
}
/* six items */
ol li:nth-child(1):nth-last-child(6) {
counter-reset: ol 4;
}
ol li:nth-child(4):nth-last-child(3) {
counter-reset: ol 0;
}
ol li::before {
counter-increment: ol -1;
content: counter(ol) '.';
text-align: right;
margin: 0 .5em 0 -1.5em;
display: inline-block;
width: 1em;
}
<h2>Two Items</h2>
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>
<h2>Four Items</h2>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>
<h2>Six Items</h2>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
<li>List item 6</li>
</ol>
How would you make all of the <li> items in a <ul> element to be displayed in a line, and how would you center that entire list on the page? You must apply your CSS directly to the <ul> element itself, you cannot use a parent element.
I tried with display:inline-flex but then you can't align the <li> items in center so any possible way to do this?
Here is my Fiddle but I cannot align the <li> in center as :
https://jsfiddle.net/pymg30yr/
The problem with inline-flex is that your ul will take the width of its content so you cannot center the items inside (as there is no space either side)
In order to fix this, just make the ul flex and then add justify-content:center:
ul {
padding:0;
margin:0;
display: flex;
list-style: none;
justify-content:center;
}
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
<li>Link 10</li>
</ul>
html
<ul>
<li>a list item </li>
<li>a loooooooooooooooooooong list item </li>
<li>another list item</li>
</ul>
css
ul {
display: table;
margin: 0 auto;
}
li {
float: left;
margin: 0 10px;
list-style-type: none;
}
demo
http://jsfiddle.net/fNFYr/467/
How to get those li that have children ul. I want to set CSS to those li. I can't set class because li are dynamically print. When I set CSS as below so it set all parent li to plus.
.ul{
width:200px;
position:relative;
}
.ul li{
position:relative;
}
.ul > li:before{
content : '+';
position: absolute;
top: 0;
right: 7px;
}
<ul class="ul">
<li>List 1</li>
<li>List 2</li>
<li>List 3
<ul>
<li>Sub List 1</li>
<li>Sub List 2</li>
<li>Sub List 3</li>
</ul>
</li>
<li>List item 4</li>
</ul>
This is style for that.
You're very close actually. The trick is to style simply each ul that is inside a .ul. Then move the + to where you want it to appear (i.e. after the first line of the parent li).
.ul {
width: 200px;
position: relative;
}
.ul li {
position: relative;
}
.ul ul::before {
content: '+';
position: absolute;
top: 0;
right: 7px;
}
<ul class="ul">
<li>List 1</li>
<li>List 2</li>
<li>List 3
<ul>
<li>Sub List 1</li>
<li>Sub List 2</li>
<li>Sub List 3</li>
</ul>
</li>
<li>List item 4</li>
</ul>
This is style for that.
You can't do that because in CSS, you don't have a parent selector.
For instance you can't do something like:
ul < li { color: #ddd; }
or even something like:
ul:has(li) { color: #ddd; }
This is because there are a lot of performance issues like re-rendering the page if you have such a parent selector. That's why W3C guys have not added the parent selector tool.
Look here for reading more into it:
Is there a CSS parent selector?
Parent selectors in CSS
So sorry if I'm asking a question that's been answered elsewhere...I can't find the answer, perhaps because I don't know how to ask it.
But I'm trying to figure out how to affect list items by setting up the class for the ul, so I only have to call the class in the ul without having to call the class for every list item.
I have a list of blue dot icons and a list of green dot icons.
I want to be able to do this
<ul class="greendot">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>
with the css like so:
ul.greendot {
list-style-image: url(http://greendot.jpg);
}
Thank you!
I recommend that you remove the bullet at the UL, then add a background image as the style for each LI...
The styles should look like this...
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul.greendot li
{
background-image: url(greendot.png);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
and the html body looks like this...
test
<ul class="greendot">
<li>test 1</li>
<li>test 2</li>
</ul>
See, If your CSS is ul.greendot then it will work for <ul class="greendot"> ....</ul>
And if you CSS is only for ul then it will work for both ul list.
<!DOCTYPE html>
<html>
<head>
<style>
/* only for greendot ul */
ul.greendot
{
list-style-image:url('http://greendot.jpg');
}
/* For both ul */
ul
{
list-style-image:url('http://greendot.jpg');
}
</style>
</head>
<body>
<ul class="greendot">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>
<ul class="reddot">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>
</body>
</html>