導航欄上的鏈接具有100％的高度作為徽標

Question

我正在嘗試將徽標與導航欄放在同一行上，並將鏈接浮動到右側。 我將圖像和ul放在相同的div中，但是如何使鏈接延伸到與圖像相同的高度？ 例如，當鼠標懸停在鏈接上時，應突出顯示從屏幕頂部到條形/徽標底部的整個高度。 現在，它僅突出顯示鏈接。

的HTML

<section id="header">
        <div id="nav">  
            <img src="images/logo.png" alt="logo" style="width:15%;height:15%">     
            <ul id="menu">
                <li><a class="link" href="#home">Home</a></li>
                <li><a class="link" href="#about">What we do</a></li>
                <li><a class="link" href="projects.html">Projects</a></li>
                <li><a class="link" href="#careers">Careers</a></li>
                <li><a class="link" href="#contact">Contact</a></li>
            </ul>
            <!-- so float right won't work -->
            <br style="clear:both;" />
        </div>
</section>

的CSS

.logo {
   display: inline-block;
   float: left;
   vertical-align: middle;
}

#menu {
   float: right;
   display: inline-block;
   padding: 0;
   margin: 0;
   vertical-align: top;
}

#menu li {
   display: inline;
   vertical-align: center;
   float: left;
   padding: 0;
   margin: 0 5px 0 5px;
}

#menu li a {
   text-transform: uppercase;
   font-weight: bold;
   font-family: 'Open Sans';
   color: #696969;
   display: block;
   text-align: center;
   padding: 10px 10px;
   text-decoration: none;
   -webkit-transition:color 0.5s ease-in;
   position: relative;
}

#menu li a:hover {
   color: #004080;
   background-color: #f2f2f2;
}

這是我的jsfiddle https://jsfiddle.net/f86u3edt/

對於一個主意，我打算使用類似http://michaelaldridge.com/的東西

Answer 1

希望flex將為您提供幫助。 這是更新的演示

 .logo { display: inline-block; float: left; vertical-align: middle; } #menu { float: right; display: flex; justify-content: flex-end; width: 100%; padding: 0; margin: 0; vertical-align: top; } #menu li { display: flex; height: 100%; align-items: center; vertical-align: center; float: left; padding: 0; margin: 0 5px 0 5px; } #menu li a { text-transform: uppercase; font-weight: bold; font-family: 'Open Sans'; color: #696969; display: block; text-align: center; padding: 10px 10px; text-decoration: none; -webkit-transition:color 0.5s ease-in; position: relative; } #menu li:hover { color: #004080; background-color: #aaa; } #nav{ display: flex; } 

 <section id="header"> <div id="nav"> <img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png" alt="logo" style="width:15%;height:15%"> <ul id="menu"> <li><a class="link" href="#home">Home</a></li> <li><a class="link" href="#about">What we do</a></li> <li><a class="link" href="projects.html">Projects</a></li> <li><a class="link" href="#careers">Careers</a></li> <li><a class="link" href="#contact">Contact</a></li> </ul> <!-- so float right won't work --> <br style="clear:both;" /> </div> </section> 

Answer 2

這可能會幫助您的小提琴： https : //jsfiddle.net/f86u3edt/7/

對於HTML代碼，我用div包裝徽標圖像，如下所示：

<div id="logo-wrapper">
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png" class="logo">   
</div>

並將其樣式設置為：

#logo-wrapper {
    float: left;
    display: inline-block; /* inline with the menu div */
}

此外，還進行了其他一些更改，例如為導航欄設置高度，並為其他組件添加了一些響應的高度樣式。

希望這對您有所幫助！

Answer 3

只需將以下CSS添加到您的代碼中，即可正常工作。 沒有大的改變:)

 .link{
  line-height:45px
}