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

Answer 2

    @media (min-width: 700px) {
.mainMenu {
    width: 85%;
}


.menuItem {
    margin: 0 2%;
    white-space: nowrap;
    }
}

我把它放在你小提琴的底部。它是media query，在一定宽度后转换为百分比。

拉伸导航栏以使用可用空间

2 个答案: