html - 调整 float 导航栏中 Logo 的大小

Question

我有一个位于屏幕顶部的导航栏。我必须首先说明，我知道像这样的导航栏在移动设备上可能会很尴尬，我刚刚从我的代码中删除了媒体查询，因为它不会影响它们。

我的问题是，如果用户的屏幕对于移动版本而言太大，但对于整个导航栏来说又太小，那么公司 Logo 会缩到导航栏下方以及下方元素下方。我希望 Logo 自动调整大小，但我还无法完成此操作。我试过给 Logo 链接一个自动宽度，也试过与其他标签混在一起，但仍然没有成功。菜单栏上的链接数量也可能有所不同，因此目前有 5 个元素，但最多可以有 7 个。我需要这种尺寸变化来影响 Logo 。

有人告诉我 Logo 需要相对于包装器，但 NavBar div 的大小会随着窗口一起缩小。

实时链接:http://rental.joshblease.co.uk/stack.php
fiddle http://jsfiddle.net/dZVyZ/

截图:

在屏幕上 > 900 像素宽

在 < 900px 宽的屏幕上

所需结果

最后一张图片有一个较小的标志，当宽度太小时缩小

HTML:

<div id="MainWrapper">
<div id="NavBar">
        <ul>
            <li class="Down DownBlue"><a href="/index/">Home</a></li>
            <li class="Green"><a href="/Property/">View</a></li>
            <li class="Pink"><a href="/About/">About Us</a></li>
            <li class="Purple"><a href="/Josh/">Josh Blease</a></li>
            <li class="Orange"><a href="/Contact/">Contact</a></li>
        </ul>
        <a href="/index/"><img id="NavLogo" src="/Images/Logo.png" /></a>
    </div>
    <div class="Clear"></div>
</div>

CSS:

#MainWrapper {
    max-width: 900px;
    width: 100%;
    margin: 0 auto 0 auto;
}
.Clear{
    clear: both;
}
#NavBar{
    overflow: hidden;
    display: block;
    position: fixed;
    width: inherit;
    max-width: 900px;
    z-index: 999;
    height:70px;
    background: url(../Images/NavBg.png);
    padding-left: 10px;
}
#NavBar ul{
    list-style: none;
}
#NavBar li{
    float: left;
    padding: 20px 0 10px;
    margin-right: 10px;
}
#NavBar li a{
    padding: 30px 10px 10px;
    background-color: #CBCBCB;
    color: #000;
    font-size: 17px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottom-right: 5px;
    -moz-border-radius-bottom-left: 5px;
    transition: background 300ms ease-in-out;
    -webkit-transition: background 300ms ease-in-out;
    -moz-transition: background 300ms ease-in-out;
    -ms-transition: background 300ms ease-in-out;
    -o-transition: background 300ms ease-in-out;
}
#NavBar .Down, .JavaOff #NavBar li:hover{
    padding-top: 30px;
}
#NavLogo{
    float: right;
    height: 60px;
    padding: 5px 15px;
}

Answer 1

就像你在问题中写的那样:

I've been told that the logo needs to be relative to the wrapper, but the NavBar div shrinks in size along with the window.

您需要定义您愿意为 Logo 元素提供多少空间。由于您想要一个响应式解决方案，您可以用百分比来定义它。

我建议将导航的大小限制在 70% 左右。您还可以添加一个最小宽度:；以防止列表项损坏。看起来媒体查询生效太晚了，因为导航的某些列表项变得太短了。

针对您的问题。我添加了一些 CSS，希望能满足您的需求:

#NavBar ul
{
    margin:0;
    padding: 0;

    float: left;
    width: 70%;
}

#NavBar ul + a
{
    display: block;
    margin-left: 70%;
    text-align: right;
    width: 30%;
}


#NavLogo 
{
    display: inline-block;
    margin-top: 10px;
    max-width: 100%;
    height: auto;
}

测试 fiddle :http://fiddle.jshell.net/p28HE/

编辑:您还可以从 #NavLogo

中删除 float.right

使用此解决方案， Logo 将最多占据屏幕宽度的 30%。这可以通过 css 和覆盖宽度媒体查询进行更改以获得更好的移动 View 。如果此解决方案对您有用或我可能遗漏了什么，请发表评论。