Html 导航栏中的流体垫片
我有一个可用的导航栏，但似乎不知道如何使间隔栏在页面调整时自动调整宽度。我曾经浮动Html 导航栏中的流体垫片,html,menu,header,navigation,css-float,Html,Menu,Header,Navigation,Css Float,我有一个可用的导航栏，但似乎不知道如何使间隔栏在页面调整时自动调整宽度。我曾经浮动#navbardiv，但是，当窗口变小时，它被包裹在徽标下面。这就是我的解决方案： （如果你不能从我的代码判断，我使用了第二个建议） 这有助于将我的#navbar保持在同一行，但由于它不能再浮动，它一直移动到#徽标的右侧。为了解决这个问题，我在#logo和#navbar之间放置了一个间隔符，但是当我缩小窗口时，我很难让#navbar在窗口上可见。我尝试过这种技巧： 但我似乎无法让它与我的代码一起工作。我并没
#navbar（如果你不能从我的代码判断，我使用了第二个建议） 这有助于将我的
#navbar#徽标的右侧。为了解决这个问题，我在#logo
和#navbar
之间放置了一个间隔符，但是当我缩小窗口时，我很难让#navbar
在窗口上可见。我尝试过这种技巧：
但我似乎无法让它与我的代码一起工作。我并没有把我的代码放在这里，只是放了间隔器之后我得到的代码。这样，任何想使用它的人都不必删除错误的代码（尽管这种情况无论如何都可能发生）
感谢您阅读本文并帮助编写代码，我将其放在JSFIDLE中供您阅读
好的，我想知道怎么做，但现在我只是将#navbar div设置为right:30px，left:auto，删除文本align:justify，并将页面的最小宽度设置为850px。这在某种程度上是一种修复，但没有使用我真正想要理解的间隔。据我所知，您希望固定宽度的徽标向左对齐，动态大小的导航向右对齐，并阻止它们在较小的视口中缠绕。对吗？
<div id="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<span class="stretch"></span>
</div>
<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>