how to remove bullets from ul Html tag in css?

Dung Do Tien May 05 2020 138

I am learning about CSS & HTML. I created menu navigation for my page. I used the <ul> tag to do but by default has bullets at the start of every item. I can not remove it and I also want all menu items to display in a line, currently one element per line.

<ul>
  <li><a href="">Home</a></li>
   <li><a href="">Tips</a></li>
   <li><a href="">Tricks</a></li>
   <li><a href="">Q&A</a></li>
   <li><a href="">Stories</a></li>
</ul>

How to remove bullets from <ul> html tag in CSS?

Thank you for any suggestions.

Have 1 answer(s) found.
  • In your issue have two question need to answer.

    1. How to remove bullets <ul> tag using CSS?

    Answer : using list-style-type: none CSS property, this property will hide bullets of <li> tag.

    2. How to display all items of ul tag in a line?

    Answer: Maybe as you know, <li> is a block tag so every block will display full line so you online set display: inline-block for all <li> tags, your problem will be solved.

     

     

     ul{
       padding: 0;
       list-style-type: none;
    }
    
    ul li{
    	display: inline-block;
    	padding: 10px 20px;
    } 

    You can see an example here.

     

    Sandeep Kumar May 05 2020
Leave An Answer
* NOTE: You need Login before leave an answer

* Type maximum 2000 characters.

* All comments have to wait approved before display.

* Please polite comment and respect questions and answers of others.

Popular Tips