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.
Removing bullets from unordered list
remove background-image from this
.navigation ul.sf-menu > li:before {
background: url(../images/menu_bull.png) 0 0 no-repeat; /** remove this */
}
and if you don't want to edit the original code add
.navigation ul.sf-menu > li:before {
background: url('');
}
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>
list items display without bullets use text instead?
Use the CSS :before selector with a content property to insert some text instead of a bullet point
ul {
list-style: none;
}
li:before {
content: 'Log';
padding-right: 5px;
}
See here for a Fiddle
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.
Don't Display Numbers/Bullets for Ordererd or Unordered List
Yes, use a style property of list-style-type:none
on the ol
, either inline as a style
attribute, or in your stylesheet under the .tabs
class.
See http://www.w3.org/TR/CSS21/generate.html#lists
Related Topics
Why Does My Image Have Space Underneath
Css Grid Layout Not Working in Ie11 Even With Prefixes
How to Force a Line Break in a Long Word in a Div
Make Absolute Positioned Div Expand Parent Div Height
How to Submit Form on Change of Dropdown List
What's the Difference If I Put CSS File Inside ≪Head≫ or ≪Body≫
How to Delete an Item or Object from an Array Using Ng-Click
How to Change Checkbox'S Border Style in Css
How to Use Google Chrome 11'S Upload Folder Feature in My Own Code
I Need an Unordered List Without Any Bullets
Create HTML Table With SQL For Xml
How to Create a Circle With Links on Border Side
Display: Inline-Block Extra Margin
How Does Jquery Work When There Are Multiple Elements With the Same Id Value