This question already has answers here:
How to remove indentation from an unordered list item?
(10 answers)
Closed 4 years ago.
Here is my code. How do I remove indents from the list items? Where does the code go?
<ul>
<li>The comment</li>
<li>The product(s) involved</li>
<li>The source of comment</li>
</ul>
You can do it with a few lines of CSS (in a style sheet):
.nobullets {
list-style-type: none;
padding: 0;
margin: 0; /* Optional */
}
<ul class="nobullets">
<li>The comment</li>
<li>The product(s) involved</li>
<li>The source of comment</li>
</ul>
Related
This question already has answers here:
difference between body and * in css
(5 answers)
Does UL have default margin or padding [duplicate]
(2 answers)
Closed 3 years ago.
I have created a nested list in html.
Why does setting margin: 0 using the *{} selector remove the list indention but not if I use the body selector?
body {
padding: 0px;
}
<ul>
<li>Home</li>
<li>About</li>
<li>Resume
<ul>
<li>Experience</li>
<li>Skills</li>
<li>Portfolio</li>
</ul>
</li>
<li>Interests
<ul>Photography</ul>
<ul>Favourites</ul>
</li>
</ul>
The asterisk * means all, so when you put a property in (all) it basically styles all the elements in your HTML body
But when you choose only to style the body you don't change anything's style but body
You can read the answers here for more details
This question already has answers here:
How to style the UL list to a single line
(5 answers)
Can I use CSS to add a bullet point to any element?
(10 answers)
Closed 3 years ago.
Just so I can try a few different layouts/designs etc could you please help me with how to get all the bullet points in a single column one after the other.
Please see the image above of how I want it to look. All the bullet points on one line going across the page.
Below is what I currently have and what I want to be displayed in bullet points that spread evenly across the page.
<a href="http://stores.ebay.co.uk/Signware/For-Walls-/_i.html?
_fsub=1806276619&_sid=1601798509&_trksid=p4634.c0.m322" target="_blank"
style="color:#000000">- Wall Display Systems
<a href="http://stores.ebay.co.uk/Signware/For-Windows-/_i.html?
_fsub=1806276419&_sid=1601798509&_trksid=p4634.c0.m322" target="_blank"
style="color:#000000">- Window Display Systems
<a href="http://stores.ebay.co.uk/Signware/For-Ceilings-/_i.html?
_fsub=1806276519&_sid=1601798509&_trksid=p4634.c0.m322" target="_blank"
style="color:#000000">- Ceiling Display Systems
<a href="http://stores.ebay.co.uk/Signware/For-Floors-/_i.html?
_fsub=1806276719&_sid=1601798509&_trksid=p4634.c0.m322" target="_blank"
style="color:#000000">- Floor Display Systems
<a href="http://stores.ebay.co.uk/Signware/Merchandising-
Accessories-/_i.html?_fsub=1806276819&_sid=1601798509&_trksid=p4634.c0.m322"
target="_blank" style="color:#000000">- In-Store Displays
<a href="http://stores.ebay.co.uk/Signware/Signware-Exlusive-/_i.html?
_fsub=1806280119&_sid=1601798509&_trksid=p4634.c0.m322" target="_blank"
style="color:#000000">- Signware Exclusive
</a></p>
I can do normal vertical BPs but just not in columns.
You can use float to get this:
ul li {
float: left;
margin-right: 25px;
}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
Note the margin-right I added there.
Just try this:
<style>
div {
width: 600px;
margin: auto;
}
li {
display: inline-block;
}
</style>
<div>
<ul>
<li>Wall Display Systems</li>
<li>Window Display Systems</li>
<li>Ceiling Display Systems</li>
<li>Floor Display Systems</li>
<li>In-Store Displays</li>
<li>Signware Exclusive</li>
</ul>
</div>
The <li> attribute will generate bullets, and the inline-block will make the li's lay next to each other. The <div>attribute make the text float in the center.
This question already has answers here:
I need an unordered list without any bullets
(16 answers)
Closed 6 years ago.
Im working on a project and im using some ul and li's.
But i cant seem to figure out how to remove those pesky black dots that come with those lists.
Can any of you help me with this?
Edit: i completely forgot to search this site if there was already an answer (derp) turns out there was! Marked this as a duplicate, thanks for helping me everyone!
Relatable post
Those black dots you are referencing to are called bullets.
They are pretty simple to remove, just add this line to your css:
ul {
list-style-type: none;
}
There you go, this is what I used to fix your problem:
CSS CODE
nav ul { list-style-type: none; }
HTML CODE
<nav>
<ul>
<li>Milk
<ul>
<li>Goat</li>
<li>Cow</li>
</ul>
</li>
<li>Eggs
<ul>
<li>Free-range</li>
<li>Other</li>
</ul>
</li>
<li>Cheese
<ul>
<li>Smelly</li>
<li>Extra smelly</li>
</ul>
</li>
</ul>
</nav>
CSS :
ul{
list-style-type:none;
}
You can take a look at W3School
I am making a webpage for a college project.
I have a navigation bar made with an unordered list and css, and i cannot figure out how to create a bulleted list on that page without it also going into the nav bar.
I am new to programming and html in general.
HTML
<ul>
<li>
Home
</li>
<li>Hobbies</li> <li>Contact</li>
<li>Image Gallery</li>
</ul>
thank you
Change your menu html tags to <nav> <ul> so that it looks something like this...
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
Then apply your menus CSS to that style set only i.e.
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
Now you can create your bullet point list normally on the same page without conflict. i.e.
<ul>
<li>List Item 1</li>
<li>List Item 1</li>
<li>List Item 1</li>
</ul>
If you've found it helpful please mark this as the accepted answer to your question. Thanks.
You can use a class or id from your CSS. E.g.
.nonbulletnav {
list-style-type: none;
}
Or
#nonbulletnav {
list-style-type: none;
}
Then in your html code just give that class or id to <ul> element as:
<ul class="nonbulletnav">
....
....
</ul>
list-style-type is an important attribute. With this you can style the bullets in different ways like use square instead of circular bullets. You can read about it on MDN. As it is obvious list-style-type: none takes off the bullets and indents the list element properly.
To create a bulleted list, use the unordered list tags <ul></ul> and list item <li></li> tags as shown in the example below.
<ul>
<li>Example</li>
<li>Example2</li>
<li>Example3</li>
</ul>
The above example would create a bulleted list as shown below.
Example
Example2
Example3
If you wanted to change this list to an ordered list (numbered list), change the <ul></ul> tags to <ol></ol>, as shown in the example below.
<ol>
<li>Example</li>
<li>Example2</li>
<li>Example3</li>
</ol>
The above example would create a numbered list as shown below.
1.Example
2.Example2
3.Example3
If you wanted to apply CSS style or use an image as your bullet list, create CSS code similar to the example below.
#content ul li
{
list-style-Type: none;
padding: 0 0 4px 23px;
background: url(http no-repeat left top;
}
In this example, using an external .css file, we're telling the web page to only change the bulleted items in the <div id="content"></div> section. If you want all bulleted items to change, you can remove the #content in the above example. In the second line, the list-style-Type: none; tells the browser to display no bullets. In the third line, the padding: 0 0 4px 23px; is the padding and indent around the bullets. Finally, the last background line tells the browser to use an image as the bullet and where to display it. With this CSS code, we get bullets as shown below.
This question already has an answer here:
Why am i being told to use <li> the way shown below <<<<
(1 answer)
Closed 7 years ago.
I posted a question and everyone said things that i was not really asking
I will try to be more clear next time.
I was told that when nesting lists you must leave a <li> without a </li>
The <<<<<<<<<<<< point to the tags.
That is what i need someone to explain... I was told this is necessary and i can't find a resource that tells me why.
<ul>
<li> Louis </li>
<li> Louis <<<<<<<<<<<<<
<ol>
<li> Louis </li>
<li> Louis </li>
<ul>
<li> Louis </li>
<li> Louis </li>
<ol>
<li> Louis </li>
<li> Louis </li>
</ol>
</ul>
</ol>
</li> <<<<<<<<<<
</ul>
A list of a list of things.
Each thing is represented by a list item.
The nested list is such a thing. It has to be part of a list item so that it can be in another list.
It might be easier to understand if you fix the errors in your example and indent it properly.
li {
background: #faa;
padding: 2px;
margin-top: 2px;
margin-bottom: 2px;
}
li li {
background: #afa;
}
li li li {
background: #aaf;
}
li li li li {
background: white;
}
<ul>
<li>Louis</li>
<li>Louis
<ol>
<li>Louis</li>
<li>Louis
<ul>
<li>Louis</li>
<li>Louis
<ol>
<li>Louis</li>
<li>Louis</li>
</ol>
</li>
</ul>
</li>
</ol>
</li>
</ul>
The end tag for a list item can always be omitted. Some tags are simply optional in HTML. The element will be ended when the parser hits a end end tag for the list or a start tag for the next list item.