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

尝试使用.last：

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>

Answer 2

试试这个：

#navcontainer ul:last-child {
    border-right: 0px;
}

Answer 3

试试这个：

#navcontainer ul li:last-child{ 
    display: inline; 
    border-right:none;
    margin-left: -12px;
}

Answer 4

您可以使用CSS3选择器：last-child。

来定位它

http://www.w3schools.com/cssref/sel_last-child.asp

#navcontainer ul li:last-child {
/* CSS here */
}

ul列表的css问题

4 个答案: