Question

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

我的问题是，如果用户的屏幕对于移动版本而言太大，但是太小而无法容纳整个导航栏，则公司徽标会在条形图下方以及下方元素下方退回。我希望徽标能够自动调整大小，但我还无法完成此任务。我试过给徽标链接一个自动宽度，并与其他标签搞混，但仍然没有运气。菜单栏上的链接数量也可能不同，因此目前有5个元素，但最多可以有7个元素。我需要更改大小以影响徽标。

我被告知徽标需要相对于包装器，但NavBar div的大小会随窗口缩小。

实时链接：http://rental.joshblease.co.uk/stack.php
小提琴 http://jsfiddle.net/dZVyZ/

截图：

在屏幕上＆gt; 900px宽 Screen wider than 900 pixels

在屏幕上＆lt; 900px宽 Screen width less than 900 pixels

必填结果 Required result

最后一张图片的徽标较小，宽度太小时缩小

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

就像你在问题中写道的那样：

我被告知徽标需要与包装器相关，但是 NavBar div与窗口一起缩小。

您需要定义您愿意为徽标元素提供多少空间。由于您需要响应式解决方案，因此可以按百分比定义。

我建议将导航大小限制在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;
}

测试小提琴：http://fiddle.jshell.net/p28HE/

修改：您还可以从float.right

中删除#NavLogo

使用此解决方案，徽标最多占据屏幕宽度的30％。这可以通过css和覆盖宽度媒体查询进行更改，以获得更好的移动视图。如果此解决方案适合您或我可能错过了什么，请发表评论。

Answer 2

最简单的解决方案是#Navlogo中的css calc函数，如下所示;用同样的方法调整高度;所以看起来不像拉伸或挤压。

#NavLogo {
float: right;
height: 60px;
padding: 5px;
width: calc(100% - 500px);
}

但如果你问我，我宁愿选择javascript或jQuery来更好地控制。另外我也不喜欢这个方向;如果您将<ul>放在单独的<div>中，将图片放在不同的<div>中会更好。希望现在有所帮助。

Answer 3

检查这个小提琴：http://jsfiddle.net/Diesel9Design/dZVyZ/1/

我给了UL一个固定的尺寸并让它向左浮动：

#NavBar ul {
    list-style: none outside none;
    width:500px;
    float: left;
}

然后我将徽标包裹在div中并给它留下了500px的边距。这允许div找出剩余的可用大小。然后我将徽标宽度设为100％，BAM它将自己调整到剩余的空间。

<div class="logoWrap">
      <a href="/index/"><img id="NavLogo" src="http://rental.joshblease.co.uk/images/Logo.png" /></a>
</div>

.logoWrap {
    margin-left:500px;
    padding:10px 0 0;
}

#NavLogo {
    width:100%;  
}

在浮动导航栏中调整徽标大小

3 个答案: