4

我想定位一个特定的元素，并且我在徽标上设置的任何属性都会覆盖其他列出的项目。例如，我有一个实心边框样式，它贯穿#nav 列出的所有项目。我只是想让图像链接徽标成为一个例外。徽标位于投资组合和项目之间的中间。我该怎么做呢？

<!--NAVIGATION-->
    <ul id="nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li id="logo"><a href="index.html"><img src="assets/img/jp-logo.png" /></a></li>
        <li><a href="projects.html">Projects</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="classlist.html">Class List</a></li> <!--change URL later-->
    </ul>

#nav{
list-style-type: none; /*gets rid of bullets*/
padding: 0;
border-color: #FFB405;
border-style: solid;
border-width: 1px 0;
text-align:center;
}
#nav li{
display: inline; /*display list horizontally*/
}
#nav a{
display: inline-block; /*don't break onto new lines and follow padding accordingly*/
padding:10px;
}
4

3 回答 3

2

我认为问题更多是关于从徽标中删除边框而不是定位元素，因为它有一个 id，因此定位就像#logo.

为了从边框中排除徽标，您需要做的第一件事是将属性应用于列表项而不是容器，<ul>然后您只需按照以下规则覆盖样式：

#nav li{
    display: inline-block; /*display list horizontally*/
    border-color: #FFB405;
    border-style: solid;
    border-width: 1px 0;
}

#nav #logo{
    border: 0;
}

最后，如果您应用此样式，您会注意到列表项之间存在间隙，这是由display:inline-blockHTML 标记中的属性和空格引起的，您可以检查此答案以了解多种正确处理该问题的方法。

这是jsFidlle中解决方案的完整演示

于 2013-09-07T05:46:59.053 回答
1

检查这个小提琴

给你border-top和你的目标，这将解决你的问题。对于您可以在元素之间看到的间隙，这可以通过设置父元素然后定义到您的元素来解决。border-bottomli#logoborder:none;lifont-size:0;font-size:npxli

HTML

<ul id="nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
    <li id="logo"><a href="index.html"><img src="http://placehold.it/50x50/" /></a></li>
        <li><a href="projects.html">Projects</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="classlist.html">Class List</a></li> <!--change URL later-->
    </ul>

CSS

ul#nav {
    margin:0;
    list-style-type: none;
    /*gets rid of bullets*/
    padding: 0;
    text-align:center;
    font-size: 0;
}
#nav li {
    margin:0;
    display: inline;
    /*display list horizontally*/
}
#nav a {
    display: inline-block;
    /*don't break onto new lines and follow padding accordingly*/
    padding:10px;
    border-top:1px solid #FFB405;
    border-bottom:1px solid #FFB405;
    margin:0;
    font-size: 16px;
}
ul#nav li#logo a {
    border-top:none;
    border-bottom:none;
}
于 2013-09-07T05:29:41.717 回答
1

你可以做

#nav > #logo a

这与具有标识标识的元素、标签<a>和具有标识导航的元素的子元素相匹配

甚至

#logo a

足够的。

于 2013-09-07T05:30:14.017 回答