由于这个标志，整个粘性导航是可点击的如何解决这个问题？答案

【问题标题】：Whole sticky nav is clickable because of this logo How to fix this?由于这个标志，整个粘性导航是可点击的如何解决这个问题？
【发布时间】：2018-05-28 06:44:53
【问题描述】：

编辑：想通了 - .sticky .logo-black { display: block; } 导致了这个问题，任何人都可以解释原因吗？

https://jsfiddle.net/37oLgkqb/

由于标志为黑色，整个粘性导航栏都是可点击的，这是什么问题？

如果我删除了 href，那么问题就解决了，但我需要 href 来将徽标链接到主页。

HTML

     <!DOCTYPE html>
<html lang="en">
   <head>
    <title>Blog</title>
    <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400" rel="stylesheet">
       <link rel="stylesheet" type="text/css" href="css/style.css">

       </head>
    <body>
        <div id="outer-background">
        <div class="container inner-background">
            <header>
                <nav class="sticky">
                    <a href="http://yahoo.com"><img src="css/img/logo-sticky.png" class="logo-black" alt="logo black"></a>
                    <ul class="main-nav js--main-nav">
                        <li><a href="http://google.com">Home</a></li>
                        <li><a href="#">Add A Post</a></li>
                        <li><a href="#">Login</a></li>
                        <li><a href="#">Register</a></li>
                    </ul>

                </nav>
                <h1 class="ion-android-share-alt"> Share Content</h1>
            </header>
            </div>
        </div>
    </body>
</html>

下面是 CSS。我有两个主导航，粘性主导航工作正常。我已将代码格式化为仅显示此代码中的粘性导航。粘性导航使整个导航栏可点击。

/************** HEADER ***************/

.logo-black {
    height: 70px;
    width: auto;
    margin: 10px 0 0 30px;

}

/***************** MAIN NAV *****************/


.main-nav {
    float: right;
    list-style: none;
    margin-top: 15px;
    margin-right: 26px;
}

.main-nav li {
    display: inline-block;
    margin-right: 22px;
}

.main-nav li:last-child {
    margin-right: 0;
}

.main-nav li a {
    text-decoration: none;
    text-transform: uppercase;
    color: rgb(19, 109, 128);
    word-spacing: 2px;
    font-size: 81%;
    font-weight: 400;
}

/*********** STICKY NAV **************/

    .sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.98);  
    box-shadow: 0 2px 2px rgba(25, 147, 177, 0.31);
    z-index: 9999;
}

.sticky .main-nav { margin-top: -50px; margin-bottom: 32px;}


.sticky .logo-black { display: block; }

【问题讨论】：

你能创建一个这个问题的演示吗？

标签： html css

【解决方案1】：

尝试将 css 更改为 .sticky { 显示：内联块； } .sticky .main-nav { 边距顶部：29px； }

【讨论】：

谢谢。这背后有什么逻辑吗。为什么 display:block 让整个东西都可以点击。
因为它占用了全部空间并且您没有在其中提供任何宽度，如果正确，请查看我的答案

【解决方案2】：

/************** HEADER ***************/
.logo-black {
height: 70px;
width: auto;
margin: 10px 0 0 30px;

}
/***************** MAIN NAV *****************/
.main-nav {
float: right;
list-style: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
}

.main-nav li {
display: inline-block;
margin-right: 22px;
}

.main-nav li:last-child {
margin-right: 0;
}

.main-nav li a {
text-decoration: none;
text-transform: uppercase;
color: rgb(19, 109, 128);
word-spacing: 2px;
font-size: 81%;
font-weight: 400;
}

/*********** STICKY NAV **************/

.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: rgba(255, 255, 255, 0.98);  
box-shadow: 0 2px 2px rgba(25, 147, 177, 0.31);
z-index: 9999;
}

.sticky .logo-black { display: inline-block; }

<div id="outer-background">
    <div class="container inner-background">
        <header>
            <nav class="sticky">
                <a href="http://yahoo.com"><img src="css/img/logo-sticky.png" class="logo-black" alt="logo black"></a>
                <ul class="main-nav js--main-nav">
                    <li><a href="http://google.com">Home</a></li>
                    <li><a href="#">Add A Post</a></li>
                    <li><a href="#">Login</a></li>
                    <li><a href="#">Register</a></li>
                </ul>
            </nav>
            <h1 class="ion-android-share-alt"> Share Content</h1>
        </header>
    </div>
</div>

【讨论】：