how to remove bullets from ul Html tag in css?
Dung Do Tien
May 05 2020
577
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>
Thank you for any suggestions.
Have 1 answer(s) found.
-
S0
Sandeep Kumar May 05 2020
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.
* Type maximum 2000 characters.
* All comments have to wait approved before display.
* Please polite comment and respect questions and answers of others.