左侧和右侧带有 ul 和图标的导航栏：右侧的图标被向下推答案

【问题标题】：Navigation Bar with ul and icons on left and right: icons on the right get pushed down左侧和右侧带有 ul 和图标的导航栏：右侧的图标被向下推
【发布时间】：2013-07-21 09:31:29
【问题描述】：

我已经完成了整个导航栏，一切都很完美，但是右侧沙子上的按钮，在导航栏菜单之后，被推到下一行并弄乱了整个导航栏，使它变得很厚。

我已经隔离了所有代码，我觉得它看起来很干净。

那是我的 index.html

<html>
<head>
    <meta charset="utf8" />
    <title>My about page</title>
    <link rel="stylesheet" href="css/style.css" />
</head>
<body>
    <header>
        <div class="wifi">
            <img src="img/wifi.gif" alt="Wi-Fi" />
        </div>
        <div class="opcoes">
            <ul>
                <li><a href="#">Início</a></li>
                <li><a href="#">Casa</a></li>
                <li><a href="#">Quartos</a></li>
                <li><a href="#">Contato</a></li>
            </ul>
        </div>

        <div class="flags">
            <ul>
                <li>
                    <img src="img/flag_en.gif" alt="English" />
                </li>
                <li>
                    <img src="img/flag_pt.gif" alt="Português" />
                </li>
            </ul>
        </div>
    </header>

</body>
</html>

这是我的 style.css

body {
    margin: 0;
}

header {
    overflow: hidden;
}

header{
    text-align: center;
    background: #C07D41;
}

.opcoes li{
    display: inline;
}

.opcoes li:after{
    content:'|';
    padding: 0 8px;
} 

.opcoes li:last-child:after{
    content: none;
}

.wifi{
    float: left;
    padding: 13px 8px;
}

.flags li{
    display:inline;
    float:right;
    padding: 0 8px;
}

任何帮助表示赞赏，真的卡在它上面，需要左右和集中导航栏上的图标，我可以这样做还是我必须使用表格？真的不知道，搞了好几个小时了。

谢谢

【问题讨论】：

标签： html css html-lists css-position navbar

【解决方案1】：

在 .opcoes 类的 css 中使用左浮动并在 .flags 类上右浮动

或者让他们display:inline-block;

【讨论】：

是的，这是完美的，我以前见过它，但它覆盖了页面中心 .opcoes 菜单的对齐方式。任何想法如何在这样做之后再次将导航栏项目集中在页面上？
为导航栏添加宽度，以便其他项目适合那里
我认为这不是一个合适的问题，我之前已经尝试过。问题是 ul 在 .opcoes 菜单之后的换行符
要对齐项目你必须使用 css 的 float 属性
比什么问题？

【解决方案2】：

.opcoes, .flags ul, .flags li {
    display: inline-block;
}

这里是：http://jsfiddle.net/YkU6e/

【讨论】：