Question

我想定位一个特定的元素，我在徽标上设置的任何属性都会覆盖其他列出的项目。例如，我有一个实心的边框样式，它贯穿所有列出的#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;
}

Answer 1

我认为问题更多的是从徽标中移除边框而不是定位元素，因为它具有ID，因此定位就像#logo一样简单。

为了从边框中排除徽标，您需要做的第一件事是将属性应用于list-items而不是容器<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-block属性和HTML标记中的空格引起的，您可以检查{{3}有多种方法可以正确处理它。

以下是 this answer

中解决方案的完整演示

Answer 2

选中 Fiddle

将border-top和border-bottom提供给您li并将#logo与border:none;对齐，这样可以解决您的问题。对于您可以在li元素之间看到的差距，可以通过设置父元素font-size:0;然后将font-size:npx定义为li元素来解决此问题。

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

Answer 3

你可以做到

#nav > #logo a

这与具有id徽标，标记<a>的元素和具有id nav

的元素的子元素匹配

甚至

#logo a

就够了。

如何定位嵌套在HTML / CSS代码中的特定元素？

3 个答案: