0

当我调整窗口大小时，右侧浮动 div 移动到居中 div。如何将右侧浮动的 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}
4

1 回答 1

0

马上，我注意到#topbar{width:100%; vertical-aligh:middle; }，你拼错vertical-align了vertical-aligh。

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

我为您制作了这个 JSFiddle，希望这代表您正在寻找的导航栏附近的东西。

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

祝朋友好运！快乐编码！//追赶。

编辑：

为了在这个答案中更明确，而不仅仅是 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伪元素清除浮动的列表内容，并width:100%;max-width:960px;允许您的栏动态地缩小尺寸以适应较小的窗口。CSS 中的其他所有内容都只是为了花哨。 //追赶。

于 2013-03-01T21:11:37.367 回答