html - div 在窗口调整大小时移动到另一个 div

Question

当我调整窗口大小时，右侧 float 的 div 移动到居中的 Div。如何将右侧 float 的 div 固定在右侧，以便在调整窗口大小时它不会移动？

<div id="topbar">
    <div id="wrapper960">
     Navigation menu
    </div>
    <div id="search">
     Searchbox
    </div>
</div>

#topbar{width:100%; vertical-aligh:middle; }
#wrapper960{width:960px; margin:0px auto; min-height:25px;}
#search{float:right; margin:-25px 0px 0px 0px}

Answer 1

我立即注意到 #topbar{width:100%;垂直对齐:中间； }，您将 vertical-align 拼错为 vertical-aligh。

尽管如此，作为一个整体，我还是建议让您的代码在语义上更能描述您要表达的内容，并遵循更严格的现代网络编码标准。

我做了This JSFiddle对您来说，希望这代表您正在寻找的导航栏附近的东西。

http://jsfiddle.net/ChaseMoskal/GHBLG/2/

祝 friend 好运! 祝您编程愉快!//追逐。

编辑:

为了在这个答案中更明确，而不仅仅是 JSFiddle，我认为将您的导航栏表示为一个无序列表，最后是搜索框会很好。

<ul class="topbar">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <div class="search">Search</div>
</ul>

关于JSFiddle中的CSS，我list-style:none;无序列表；我 display:inline-block; 列表项(float:left; 将是一种完全可以接受的方式，也许也是更跨浏览器的方式)；我 float:right; 搜索框。列表中的 ::after 伪元素清除 float 列表内容，width:100%;max-width:960px; 允许您的栏动态缩小尺寸以获得更小的窗口。 CSS 中的其他一切都只是为了幻想。 //Chase。