Question

我正在尝试创建一个自适应导航栏，我不是导航右侧的元素，如下所示：Example

我正在放浮动：对，但它不起作用，之后，我尝试使用margin-left，但是如果我使用保证金，它将不会响应。左边的浮动元素是一个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，我认为它可能是其他样式的问题，但是类.languages是最后一个，他们，我尝试使用ID，但我得到了这个： Result with 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），而不是一个类！尝试将“＃”更改为“。” 。如果这不起作用，请将此路径添加到您的css

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

Float：右边不能使用元素

2 个答案: