Html 左侧和右侧带有ul和图标的导航栏：按下右侧的图标_Html_Css_Html Lists_Css Position_Navbar

Html 左侧和右侧带有ul和图标的导航栏：按下右侧的图标

html css

Html 左侧和右侧带有ul和图标的导航栏：按下右侧的图标,html,css,html-lists,css-position,navbar,Html,Css,Html Lists,Css Position,Navbar,我已经完成了整个导航栏，一切都很完美，但右侧沙滩上的按钮，在导航栏菜单之后，被向下推到下一行，弄乱了整个导航栏，使其非常厚我已经隔离了所有的代码，我认为它看起来非常干净这是我的index.html <html> <head> <meta charset="utf8" /> <title>My about page</title> <link rel="stylesheet" href="css/styl

我已经完成了整个导航栏，一切都很完美，但右侧沙滩上的按钮，在导航栏菜单之后，被向下推到下一行，弄乱了整个导航栏，使其非常厚

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

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

感谢任何帮助，真的陷入其中，需要在左右和集中导航栏上的图标，我这样做是可能的，还是我必须使用一张桌子？真的不知道，已经谈了好几个小时了

谢谢

在

.opcoes

类中使用css中的左浮动，在

类中使用右浮动
或者让它们显示：内联块
.opcoes, .flags ul, .flags li {
    display: inline-block;
}

这是：是的，这很完美，我以前也见过，但这会覆盖页面中心.opcoes菜单的对齐。这样做之后，你知道如何让导航栏项目再次集中在页面上吗？增加导航栏的宽度，这样其他项目就可以放在那里了。我想这不是一个合适的问题，我以前也试过。问题是ul在.opcoes菜单自动对齐项u后执行换行操作时必须使用csst的float属性。问题是什么？
.opcoes, .flags ul, .flags li {
    display: inline-block;
}