Remove bullet points in UL in CSS
#menu-bar ul
will only target the ul
which is a direct child of #menu-bar
, the style wont propagate to nested ul
's within.
To target the nested ul you can either target it directly by it's class:
.noJS {
list-style:outside none none;
}
or by drilling into the nested structure:
#menu-bar ul li ul {
list-style:outside none none;
}
I need an unordered list without any bullets
You can remove bullets by setting the list-style-type
to none
on the CSS for the parent element (typically a <ul>
), for example:
ul {
list-style-type: none;
}
You might also want to add padding: 0
and margin: 0
to that if you want to remove indentation as well.
See Listutorial for a great walkthrough of list formatting techniques.
How can I remove bullets from html list without losing other formatting?
As Thomas L. mentioned in the comments, you can add a CSS style component to your code to hide the bullet points that are being created for the li tags.
So in each of your li tags you would change them like so:
<li style="list-style: none">
Here is your modified code:
.link-container {
background-color: #4e4e4e91;
border-color:rgba(129, 191, 235, 0.978);
border-width: 1px;
border-style: solid;
height: 50%;
border: 2px solid rgba(129, 191, 235, 0.978) ;
border-radius: 30px;
}
.links {
display: flex;
justify-content: space-between;
align-items: center;
margin-left: 100px;
margin-right: 100px;
}
a {
color: rgb(245, 245, 245);
text-decoration: none;
font-weight: bold;
border: 1px solid ;
background: 0;
font-weight: 600;
border-radius: 40px;
padding: 0 10px;
}
a:hover{
color: rgb(129, 191, 235)
}
.input-box {
background-color: white;
color: gb(129, 191, 235);
}
<div>
<div class= "link-container">
<h6 class="links">
<li style="list-style: none">
<a href="https://www.visitberlin.de/de/sehenswuerdigkeiten-berlin" class="linkButton.clearbutton" itemprop="possibilities"> Sehenswürdigkeiten</a>
</li>
<li style="list-style: none">
<a href="https://service.berlin.de/behoerden/" class="linkButton.clearbutton"
itemprop="possibilities">Behörden </a>
</li>
<li style="list-style: none">
<a href="https://www.berlin.de/clubs-und-party/clubguide/a-z/" class="linkButton.clearbutton"
itemprop="possibilities">Clubs</a>
</li>
<li style="list-style: none">
<a href="https://www.berlin.de/tourismus/parks-und-gaerten/" class="linkButton.clearbutton"
>Parks</a>
</li>
<li style="list-style: none">
<a href="https://www.berlin.de/stadtplan/" class="linkButton.clearbutton"
itemprop="possibilities" >Stadtkarte</a>
</li>
</h6>
</div>
</div>
Remove bullets from <ul>?
#menu ul
is trying to target a ul
that is a descendant of #menu
. This is incorrect, since in your case they are the same element. ul#menu
would be correct.
Removing bullets from unordered list <ul>
ul.menu li a:before, ul.menu li .item:before, ul.menu li .separator:before {
content: "\2022";
font-family: FontAwesome;
margin-right: 10px;
display: inline;
vertical-align: middle;
font-size: 1.6em;
font-weight: normal;
}
Is present in your site's CSS, looks like it's coming from a compiled CSS file from within your application. Perhaps from a plugin. Changing the name of the "menu" class you are using should resolve the issue.
Visual for you - http://i.imgur.com/d533SQD.png
How to remove bullets from Unordered list nested in Div's?
Maybe your browser is cached, try using control+shift+R on the page you are using, your code is fine here
*{
margin: 0;
padding: 0;
box-sizing: border-box;}
body{
height: 100%;
}
.nav-wrapper{
display: grid;
grid-template-columns: repeat(6, 1);
grid-template-rows: 8;
height: 100px;
width: 900px;}
ul { list-style: none;}
<div class="nav-wrapper">
<div class="logo">
<!-- <a href="/">Logo</a> -->
</div>
<div class="main-page-links">
<ul>
<li><a href="">MENU</a></li>
<li><a href="">WEEKLY EVENTS</a></li>
<li><a href="">FILLER</a></li>
<li><a href="">FILLER</a></li>
</ul>
</div>
<div class="gallery">
<img src="" alt="image galleries">
</div>
</div>
Removing black dots from li and ul
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;
}
Related Topics
Default Width/Height of an Iframe
Pin a Flex Item to The Bottom of The Container
What Does "Top: 0; Left: 0; Bottom: 0; Right: 0;" Mean
CSS/HTML: What Is The Correct Way to Make Text Italic
Photoshop Mock Up Font Isn't Same as in HTML
How to Use Custom Fonts in an HTML5 Canvas Element
Can HTML5 Websockets Connect 2 Clients (Browsers) Directly Without Using a Server? (P2P)
Making a <Button> That's a Link in HTML
How to Reverse Flexbox Direction on Wrap to Achieve "Snake Wrap"
Flexbox Layout with Two Equal Height Children, One Containing Nested Flexbox with Scrolling Content
CSS: Display:Block; Vs Display:Table;
Why Is Padding Expanding a Flex Item
How to Set Gaps (Gutters) in a Flex Container
HTML Tab Interface Using Only CSS
Selecting Siblings Between Two Nodes Using Xpath
Display: Inline-Block Does Not Make Width as Small as Possible with Wrapped Contents