带有ul的导航栏以及左右两侧的图标:右侧的图标被向下推

我已经完成了整个导航栏，一切都很完美，但在导航栏菜单之后，右边沙子上的按钮被向下推到下一行，把整个导航栏搞砸了，变得很厚。

我已经隔离了所有的代码，我认为它看起来非常干净。

这是我的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>

这是我的风格.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;
}

感谢任何帮助，真的很难，需要左右两侧的图标和中央导航栏，我现在这样做可能吗？还是我必须使用表格？真的不知道，已经讲了好几个小时了。

感谢

在.opcoes类上使用css中的float left，在.flags类上使用float right

或使其成为display:inline-block;

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

它在这里：http://jsfiddle.net/YkU6e/

相关内容

最新更新

热门标签：