Question

我在网站上使用<ul>标记时有两个ID。 id .a有效且没有任何要点。我使用时，id .b不起作用 list-style-type：square;标签。基本上，我希望id .b有子弹点，我不希望id .a有子弹点。他们两个都没有显示任何要点。我的问题是我的身份错误.b因为我希望它有子弹点而不是。

我将发布以下代码部分。

#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;
                    }

以下是我的完整<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>

这是我的完整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;}

Answer 1

你的class =“b”列表项目正在获得正方形，但它被这行css吞噬了：li { display:inline-block; margin-right:15px; }

您可能需要更加具体地使用css选择器才能使其正常工作，例如ul.a li {display：inline-block;保证金权：15px的;根据你的标记，可能会实现你想要做的事情。

你没有分享你的标记对于class =“b”项目的内容，但是你可以看到它在这个JS的工作中改变了对css的更改：https://jsfiddle.net/52e5Lsm5/5/

Answer 2

这个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>

CSS <ul>项目符号无效

2 个答案: