0

我试图让我的 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>

任何人都可以帮忙吗？谢谢！

4

4 回答 4

3

试试这个.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>
于 2012-05-04T18:24:36.930 回答
0

尝试这个：

#navcontainer ul:last-child {
    border-right: 0px;
}
于 2012-05-04T18:24:42.073 回答
0

尝试这个：

#navcontainer ul li:last-child{ 
    display: inline; 
    border-right:none;
    margin-left: -12px;
}
于 2012-05-04T18:24:57.040 回答
0

您可以使用 CSS3 选择器 :last-child 来定位它。

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

#navcontainer ul li:last-child {
/* CSS here */
}
于 2012-05-04T19:13:03.337 回答