浮动：右边不适用于元素

Question

我正在尝试制作响应式导航栏，但我不想在导航栏右侧添加一个元素，如下所示：Example

我放了 float:right，但它不起作用，之后，我尝试使用 margin-left，但如果我使用 margin left，它就不会响应。 float 左边的元素是 li 元素。这是我的全部 HTML：

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Responsive Menu</title>
</head>
<body>
<div class="container">

    <a class="toggleMenu" href="#">Menu</a>
    <ul class="nav">
        <li class="test">
            <a href="#">I amsterdam</a>
        </li>
        <li  class="test">
            <a href="#">La Ciudad</a>
            <ul>
                <li>
                    <a href="#">Museos</a>
                    <ul>
                        <li><a href="#">Museo van Gogh</a></li>
                        <li><a href="#">Rijksmuseum</a></li>
                        <li><a href="#">Casa de Ana Frank</a></li>
                        <li><a href="#">Museo Casa de Rembrandt</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Lugares</a>
                    <ul>
                        <li><a href="#">Vondelpark</a></li>
                        <li><a href="#">Barrio de Jordan</a></li>
                        <li><a href="#">Red Light Distrit</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li  class="test">
            <a href="#">Alojamiento</a>
            <ul>
                <li>
                    <a href="#">Hoteles</a>
                    <ul>
                        <li><a href="#">Los mejores Hoteles</a></li>
                        <li><a href="#">Hoteles más económicos</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Albergues</a>
                </li>
            </ul>
        </li>
        <li  class="test">
            <a href="#">Eventos</a>
            <ul>
                <li>
                    <a href="#">Concierto Kanye West</a>
                </li>
                <li>
                    <a href="#">Ajax - Real Madrid</a>
                </li>
                <li>
                    <a href="#">Amsterdam Fashion Week</a>
                </li>
            </ul>
        </li>
        <li  class="languages">
            <a href="#">Languages</a>
            <ul>
                <li>
                    <a href="#">English</a>
                </li>
                <li>
                    <a href="#">Español</a>
                </li>
                <li>
                    <a href="#">Français</a>
                </li>
                <li>
                    <a href="#">Deutsch</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

还有我的 CSS，我认为这可能是其他样式的问题，但 class .languages 是最后一个，他们，我尝试使用 ID，但我得到了这个：

CSS是这样的：

body, nav, ul, li, a  {
margin: 0; 
padding: 0;
}

body {
width: 100%; 
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
background-color: red; 
}

 a {
 text-decoration: none;
 }

.container {
 width: 100%;
 }
.toggleMenu {
 display:  none;
 background: #666;
 padding: 10px 15px;
 color: #fff;
}
.nav {
 list-style: none;
 *zoom: 1;
 background:#175e4c;
 position: relative;
 }

.nav:before,
.nav:after {
content: " "; 
display: table; 
}
.nav:after {
clear: both;
 }

.nav ul {
list-style: none;
width: 9em;
}

 .nav a {
 padding: 10px 15px;
 color:#fff;
 *zoom: 1;
 }

.nav > li {
 float: left;
 border-top: 1px solid #104336;
 z-index: 200;
 }

.nav > li > a {
 display: block;
 }

.nav li ul {
 position: absolute;
 left: -9999px;
 z-index: 100;
 }

.nav li li a {
 display: block;
 background: #1d7a62;
 position: relative;
 z-index:100;
 border-top: 1px solid #175e4c;
 }

.nav li li li a {
 background:#249578;
 z-index:200;
 border-top: 1px solid #1d7a62;
 }

 #languages{
  float: right; 
 }

Answer 1

我不确定为什么它对您不起作用。使用您的示例代码，但只需将 id="languages" 添加到 li 元素似乎就可以了。参见 https://jsfiddle.net/eaLow5h3/

Answer 2

在您的 css3 中，您将 id 作为选择器 (#languages) 而不是 class！尝试将“#”更改为“.” .如果这不起作用，请添加到您的 css 此路径

 .nav > li.languages{
  float: right; 
 }

浮动：右边不适用于元素

Float: right doesn´t work with an element

html

css

navigation