How do you retain the indentation of numbered lists? I have a page where the numbers are pushed off the page. How can I prevent this?
<ol style="padding: 0">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
With a CSS rule like this:
ol { margin-left: 30px; }
Here's some information about the CSS box model.
What about using:
li { list-style-position: outside; }
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
I want to show the a List in Two Columns
But I want to show Order List that contains Arabic Language. This means that the direction should be from Right to Left E.g direction:rtl. Unfortunately, its not working accurately for me.
ol {
width: 30em;
}
ol li {
float: left;
width: 10em;
}
br {
clear: left;
}
div.wrapper {
margin-bottom: 1em;
}
<h1>List Of Items</h1>
<div class="wrapper">
<ol dir="ltr">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ol>
<br />
</div>
Add 'direction: rtl' in 'ol' style:
ol
{
direction: rtl;
width: 30em;
}
ol li
{
float: left;
width: 10em;
}
br
{
clear: left;
}
div.wrapper
{
margin-bottom: 1em;
}
<h1>List Of Items</h1>
<div class="wrapper">
<ol dir="ltr">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ol>
<br />
</div>
Based on the required layout
CSS Columns would work with rtl as a direction.
ol {
width: 30em;
column-count: 2;
list-style-position: inside;
}
ol li {
width: 10em;
}
div.wrapper {
margin-bottom: 1em;
}
<div class="wrapper">
<ol dir="rtl">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
</div>
I am trying to cater for line breaks in a list so that the bullet points are used more like separators instead, I have this so far...
ul {
margin:auto;
max-width:280px;
list-style:none;
text-align:center;
}
li::before {
content: "•";
color: red;
}
li {
display:inline;
}
<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>
</ul>
How can I make sure that list items aren't split between lines and also make sure that bullet points only display if it isn't a new line?
I am try to make things look like this...
The width of the container and the number of items does change so trying to do this without assigning individual classes
A couple of techniques will help you achieve this effect.
1st use first-child on the list element to hide the first separator.
The second is a little hacky but it's the way to hide the bullet when the menu rows wrap; Use a pseudo-element on the ul to create an overlay to hide the first bullet in the second row.
If you want to align the bottom row to the middle you're going to want to use flexbox, with justify-content:center and move your bullet to the right after each element. Move the ul overlay to the right and hide the bullet of the last-child instead of the first-child.
ul{margin:auto;max-width:300px;list-style:none;text-align:center; position:relative; overflow:hidden;padding-left:0; display:flex; flex-wrap:wrap; justify-content: center; }
ul:before {content:" "; height: 100%; position:absolute; right:0; width:0.75rem; background-color: #fff; z-index:2; }
ul> li{display:inline; padding:0 0.5rem; position:relative;}
ul > li:before {position:absolute; right:0; transform:translateX(50%); content: "•"; color: red;}
ul > li:last-child:before{ display:none;}
<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>
</ul>
What I am trying to do is:
Assume that I have the following list:
Item 1
Item 2
Item 3
Item 4
I want to alternate between two colours so for example:
Item 1 (Blue)
Item 2 (Orange)
Item 3 (Blue)
Item 4 (Orange)
But I want this behaviour to be controlled in CSS so I can just write:
<ul>
<li>Item 1</li>
</ul>
Can anyone point me in the right direction to how I would achieve this?
You can use :nth-child pseudo class:
ul li:nth-child(2n+1) { color: blue; }
ul li:nth-child(2n) { color: orange; }
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
You can use CSS :nth-child
li { color: blue; }
li:nth-child(odd) { color: orange; }
JSFiddle Code
I have two divs. When I rollover on a link, I want to hide one div and show the other so it appears as if the background color has changed. Here is some example HTML:
<div id="main-nav">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="sub-nav">
<ul>
<li>SubItem 1</li>
<li>SubItem 2</li>
<li>SubItem 3</li>
</ul>
</div>
The sub-nav div is EXACTLY the same as the main-nav div, except the background-color is different.
#main-nav {
width: 500px;
height: 250px;
background-color: black;
display: block;
}
#sub-nav {
width: 500px;
height: 250px;
background-color: white;
display: none;
}
All I want to do is show the #sub-nav div whenever an item in the #main-div is hovered over. So the effect will be that the background-color appears to change from black to white on hover.
Can I do this using only CSS?
Basically I am wanting to know if I can change the display property of a containing div whenever an element inside that div (the <a> tag) is hovered over? That is, hovering on a link should cause its containing div #main-nav to change to display: none and the #sub-nav div to become display:block
No you can't do this just with CSS. You would need the subnav to be a child of the element you are hovering or directly adjacent to it.
You could use css selectors like
#main-nav li:hover .sub-nav{}
or
#main-nav li:hover + .sub-nav{}
Alternatively you could use javascript
Why not just change the background color? Like this:
<div id="main-nav">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
#main-nav:hover { background-color: black; }
Edit you can do exactly what you asked, but you'd need a wrapper for that:
<div class="navigation-wrapper">
<div class="main">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div class="sub">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
And in your css:
.navigation-wrapper .sub { display: none; }
.navigation-wrapper:hover .main { display: none; }
.navigation-wrapper:hover .sub { display: block; }
Fiddle demo
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>