Question

我有一个工作的导航栏，但似乎无法弄清楚如何在页面调整时使间隔自动调整宽度。我过去常常浮动#navbar div，但是当窗口变小时，它会包裹在徽标下面。所以，这是我的解决方案：

CSS floats - how do I keep them on one line?
（如果你不能通过我的代码判断，我使用了第二个建议）

这有助于我的#navbar保持在同一条线上，但由于它不能再浮动，它一直移动到#logo的右侧。为了解决这个问题，我在#logo和#navbar之间添加了一个空格，但是当我缩小窗口时，我无法在窗口上看到#navbar。我尝试过这种技术：

https://jsfiddle.net/thirtydot/EDp8R/

<div id="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <span class="stretch"></span>
</div>

但我似乎无法使用我的代码。我不会把我的尝试代码放在这里，就像我在插入spacer之后得到的那样。那样，无论谁想要使用它都不必删除错误的代码（认为可能会发生这种情况）。

感谢您查看此内容并对代码进行帮助，我已将其放入jsfiddle以便您阅读。

https://jsfiddle.net/thinktwice84/93tt9uLh/

<body class="contact">
    <header id="header">
        <div id="logo">
            <a href="../Pages/index.html"><img src="../Images/R2.png" alt="Portfolio"/></a>
        </div><!--logo-->
        <div id="header_spacer" content=''></div>
        <div id="navbar"> 
            <ul id="navbar_ul"> 
                <li class="nav"><a href="../Pages/login.html" alt="login" >LOGIN</a></li>
                <li class="nav"><a href="../Pages/contact.html" alt="contact information" >CONTACT</a></li>
                <li class="nav"><a href="../Pages/about.html" alt="about the artist" >ABOUT</a></li>
                <li class="nav"><a href="../Pages/portfolio.html" alt="portfolio" >PORTFOLIO</a>
                    <ul id="portfolio_menu">
                        <li><a href="../Pages/paintings.html" alt="paintings" >PAINTINGS</a></li>
                        <li><a href="../Pages/drawings.html" alt="drawings" >DRAWINGS</a></li>
                        <li><a href="../Pages/cartoons.html" alt="cartoons" >CARTOONS</a></li>
                    </ul><!--portfolio_menu-->
                </li>
            </ul><!--navbar_ul-->
       </div><!--navbar-->
    </header>
</body>

导航栏中的流体垫片

0 个答案: