html - ul 列表的 css 问题

Question

我试图让我的 ul 列表中的最后一个 li 不显示边框。我确实想要其他一切之间的边界。我只想要细线作为列表之间的分隔符。这是我的代码:

CSS

 #navcontainer ul li { 
        display: inline; 
        border-right:1px solid #5C5C5C;
        margin-left: -12px;
    }
    #navcontainer ul .last li{ 
        display: inline; 
        border-right:0;
        margin-left: -12px;
    }

    #navcontainer ul li a{
        text-decoration: none;
        padding: .2em 1em;
        color: #5C5C5C;
    }

html

<ul class="qa-list">
    <li>
        <a href="#rewards" title="Rewards">Rewards Questions</a> 
    </li>
    <li>
        <a href="#logging" title="Logging In">Logging In Questions</a> 
    </li>
    <li>
        <a href="#uploading" title="Uploading Photo">Uploading Photo Questions</a>
    </li>
    <li>
        <a href="#enter" title="Entering Supporter Email">Entering Supporter Email Questions</a> 
    </li>
    <li>
        <a href="#fb" title="Sharing on Facebook">Sharing on Facebook Questions</a> 
    </li>
    <li>
        <a href="#letter" title="Printing Donation Letter">Printing Donation Letter Questions</a> 
    </li>
    <li>
        <a href="#tracking" title="Tracking Donations">Tracking Donations Questions</a> 
    </li>
    <li>
        <a href="#privacy" title="Privacy">Privacy Questions</a> 
    </li>
    <li>
        <a href="#gift" title="Supporter "Thank You" Gift">Supporter "Thank You" Gift Questions</a> 
    </li>
    <li>
        <a href="#rog" title="About Reaching Our Goal">About Reaching Our Goal Questions</a> 
    </li>
    <li>
        <a href="#contact" title="Contact Information Questions">Contact Information Questions</a> 
    </li>
</ul>

有人可以帮忙吗？谢谢!

Answer 1

最后试试这个:

border-right: none;

此外，您似乎没有将 .last 类应用于任何 li 元素。此外，如果您确实应用了它，则需要更改您的选择器，使其显示为 li.last，而不是 .last li。

CSS:

#navcontainer ul li.last
{
   ...
   border-right: none;
   ...
}

列表项:

<li class="last">
   <a href="#contact" title="Contact Information Questions">Contact Information Questions</a>
</li>