CSS<ul> 要点将不起作用
[英]CSS <ul> bullet points will not work
问题描述
I have two id's that I am using for a <ul> tag in my website.
我有两个 ID，用于我网站中的<ul>标签。 The id .a works and doesn't have any bullet points. id .a 有效并且没有任何要点。 The id .b does not work when I use list-style-type: square;当我使用 list-style-type: square 时， id .b 不起作用； tag.标签。 Basically, I want id .b to have bullet points and I don't want id .a to have bullet points.基本上，我希望 id .b 有要点，而我不希望 id .a 有要点。 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.我的问题是我的 id .b 做错了什么，因为我希望它有要点，但它没有。
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这是我完整的<li>和<ul> html 标签
<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这是我的完整 CSS 代码
#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 个解决方案
解决方案1
0 已采纳 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; }你的 class="b" 列表项得到了正方形，但它被这行 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;您可能需要更具体地使用 css 选择器才能使其正常工作，例如 ul.a li { display:inline-block; margin-right:15px;边距右：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/你还没有分享你的 class="b" 项目的标记是什么，但你可以看到它在这个 JS fiddle 中对 css 的更改： https : //jsfiddle.net/52e5Lsm5/5/
解决方案2
0 2015-11-18 19:56:09
This css should work:这个css应该可以工作：
#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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.