CSS <ul> bullet points will not work
Question
I have two id's that I am using for a <ul> tag in my website. The id .a works and doesn't have any bullet points. The id .b does not work when I use list-style-type: square; tag. Basically, I want id .b to have bullet points and I don't want id .a to have bullet points. Both of them don't show any bullet points. My question is what am I doing wrong with my id .b because I want it to have bullet points and it doesn't.
I will post the section of the code below.
#navbar { margin-right: auto;
margin-left: auto;}
.a { list-style-type: none;
margin: 0;
padding: 0;
overflow:0;
}
.b { list-style-type: square;
text-align: center;
}
Here are my full <li> and <ul> html tags
<div id="navbar">
<ul class="a">
<li><a href="Hannagan Auction Company Index.html">Home</a></li>
<li><a href="Hannagan Auction Company-pageone.html">About</a></li>
<li><a href="Hannagan Auction Company-pagetwo.html">Auctions</a><li>
<li><a href="Hannagan Auction Company-pagethree.html">Contact</a><li>
<li><a href="Hannagan Auction Company-pagefour.html">Pictures</a><li>
</ul>
</div>
Here is my full CSS code
#navbar { margin-right: auto;
margin-left: auto;}
.a { list-style-type: none;
margin: 0;
padding: 0;
overflow:0;
}
.b { list-style-type: square;
text-align: center;
}
a:link, a:visited { display: block;
font-weight: bold;
color: white;
background-color: black;
padding: 6px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 120px;
}
a:hover, a:active { background-color: red;}
li { display:inline-block; margin-right:15px;}
html { background-color: #262626;}
body { margin: auto;
margin-left: 199px;
margin-right: 185px;
text-align: center;
background-color: white;}
2 answers
solution1
0 ACCPTED 2015-11-18 19:52:52
Your class="b" list items are getting the square, but its getting swallowed up by this line of css: li { display:inline-block; margin-right:15px; } li { display:inline-block; margin-right:15px; }
You may need to be more specific with your css selectors to get it working, something like ul.a li { display:inline-block; margin-right:15px; } might achieve what you're trying to do, depending on your markup.
You haven't shared what your markup is for the class="b" items, but you can see its working in this JS fiddle with that change to the css: https://jsfiddle.net/52e5Lsm5/5/
solution2
0 2015-11-18 19:56:09
This css should work:
#navbar { margin-right: auto; margin-left: auto;} .a { list-style-type: none; margin: 0; padding: 0; overflow:0; } .b { list-style-type: bullets; text-align: center; } a:link, a:visited { display: block; font-weight: bold; color: white; background-color: black; padding: 6px; text-align: center; text-decoration: none; text-transform: uppercase; width: 120px; } a:hover, a:active { background-color: red;} li { margin-right:15px;} html { background-color: #262626;} body { margin: auto; margin-left: 199px; margin-right: 185px; text-align: center; background-color: white;}
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <div id="navbar"> <ul class="a"> <li><a href="Hannagan Auction Company Index.html">Home</a></li> <li><a href="Hannagan Auction Company-pageone.html">About</a><li> <li><a href="Hannagan Auction Company-pagetwo.html">Auctions</a><li> <li><a href="Hannagan Auction Company-pagethree.html">Contact</a><li> <li><a href="Hannagan Auction Company-pagefour.html">Pictures</a></li> </ul> <ul class="b"> <li><a href="Hannagan Auction Company Index.html">Home</a></li> <li><a href="Hannagan Auction Company-pageone.html">About</a></li> <li><a href="Hannagan Auction Company-pagetwo.html">Auctions</a></li> <li><a href="Hannagan Auction Company-pagethree.html">Contact</a></li> <li><a href="Hannagan Auction Company-pagefour.html">Pictures</a></li> </ul> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.