如何设计此导航栏

Question

我正在尝试为我的网站构建导航栏，考虑将其转换为css中的响应式设计。

我的布局中包括左侧的徽标+站点名称，栏中央部分的1个按钮和1个文本字段，以及左侧的2个小方块下拉列表。随着屏幕变小，一些元素消失，一些元素变小，没有什么超复杂的：

我正在考虑制作一个列表，但搜索表单不能成为列表的一部分，我确实尝试创建单独的div，按照图像对对象进行分组，但结果并不是真正令人满意（浮点问题） ：）

考虑到响应式布局，您对构建此类导航栏的建议是什么？

谢谢！

Answer 1

使用Bootstrap框架怎么样？
您可以轻松设计响应式导航栏 http://getbootstrap.com/components/#navbar

希望这有帮助！

Answer 2

好吧，我做了自己的功课，最终解决了自己的问题。首先，我将标题划分为3个div（navleft，center和navright），但由于我想在两个中间元素之间有固定的间隙，所以我分裂了“中心”。 div分为3 - 中左，中心（仅包含10px填充）和中右。

在css中，我定义了宽度，浮动等，以使导航栏响应并最终得到一个工作标题，同时还有搜索＆＃39; ＆＃39; go＆＃39;按钮。 Html代码：

<div id="top-bar"> 
    <div class="navleft">
        <div class="logo"><img src="logo.png"></div>
        <div id="site-title"><a href="#">WEBSITE</a></div>
    </div>

    <div class="center-left">               
        <div class="new rounded">
        <a href="#"><span class="inline">NEW</span><img class="make" src="make.png"></a></div>          
    </div>
    <div class="center"></div>
    <div class="center-right">
        <div class="searchbox rounded">
            <input type="text" placeholder="Search...">
            <button class="mglass right"><a href="#"></a></button>
        </div>          
    </div>

    <div class="navright">                                  
        <div id="yours" class="rounded">
            <div><a href="#"><img src="yours.png"></a></div>
        </div>
        <div id="logged" class="rounded">
            <div><a href="#"><img class="avatar rounded" src="avatar4.jpg"></a></div>
        </div>
        <div class="username">Ricardo<br>Pindollini</div>
    </div>
</div>