html - 拉伸(stretch)导航栏以使用可用空间

Question

我正在使用以下 html 并使用 min-width 属性来确保我的导航栏不会低于特定宽度，否则它将换行在图像下方。您可以通过手动减小浏览器窗口的宽度来验证这一点(请参阅 jsfiddle)。

#pageHeader {    
    background-size: cover;
    min-width: 550px;
}

<div id="pageHeader">
    <img class="myLogo" id="logo" src="http://www.growingvoters.org/images/online-voting-tools.jpg">    

    <div class="mainMenu" id="mainMenu">
        <a class="navLink menuItem" href="#">DASHBOARD</a>
        <a class="navLink menuItem" href="#">NEWS</a>
        <a class="navLink menuItem" href="#">CONTACT</a>
        <a class="navLink menuItem" href="#">ABOUT</a>
        <a class="navLink menuItem" href="#">CAREERS</a>
    </div>
</div>

https://jsfiddle.net/mmn24kab/

但是有什么方法可以让导航栏在屏幕全宽时使用尽可能多的水平空间。我觉得这应该很简单，但似乎无法弄清楚。我确实尝试找到类似的问题，但没有成功。

Answer 1

怎么样 this ？:

.mainMenu {
    height: 30px;
    padding-top: 55px;
    overflow: hidden;
    text-align: right;
}
.myLogo{
    width:80px;
    height:80px;    
    float: left;
}