0

我对使用本教程制作的响应式菜单有疑问，实现起来非常简单，我也会在此处添加代码。

如果你在这里访问我的页面，你可以看到我在底部有一个 5 项菜单。但我试图让它向右移动，我尝试将“float：right”添加到导航，添加到 div，但它不起作用。

这是我的 HTML

<div class="container" style="background:lightgray; padding: 15px">
    <h3> 5 menu left </h3>
    <nav>
    <ul>
    <li><a class="current" href="#">PixelsDaily</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Work</a></li>
    <li><a href="#">Work2</a></li>
    </ul>       
    </nav>
</div>

这是我的 CSS

.container {
    position: relative;
    width: 960px;
    margin: 0 auto;
    padding: 0;
}

* {
    padding: 0;
    margin: 0;

    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

nav {
    width: 90%;
    margin: 50px auto; 
}

nav ul {
    list-style: none;
   /* overflow: hidden; */
}

nav li a {
    background: #444;
    border-right: 1px solid #fff;
    color: #fff;
    display: block;
    float: left;
    font: 400 13px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 12.5%;

        /*TRANSISTIONS*/
    -webkit-transition: background 0.5s ease;
       -moz-transition: background 0.5s ease;
         -o-transition: background 0.5s ease;
        -ms-transition: background 0.5s ease;
            transition: background 0.5s ease;
}


 /*HOVER*/
nav li a:hover , nav li a.current{
    background: #222;
}

nav li a:visited {
    color:#FFF;
}

nav li:last-child a {
    border: none;
}

/*SMALL*/
nav small {
    color: #aaa;   
    font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif;
    text-transform: none;

}

/* MEDIA QUERIES*/
@media only screen and (max-width : 1220px),
only screen and (max-device-width : 1220px){
    nav li a {
        font: 400 10px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
    }

    nav small {
        font: 100 10px/1 Helvetica, Verdana, Arial, sans-serif;
    }
}

@media only screen and (max-width : 930px),
only screen and (max-device-width : 930px){
    nav li a {
        width: 25%;
        border-bottom: 1px solid #fff;
        font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
    }

    nav li:last-child a, nav li:nth-child(4) a {
        border-right: none;
    }

    nav li:nth-child(5) a, nav li:nth-child(6) a, nav li:nth-child(7) a, nav li:nth-child(8) a {
        border-bottom: none;
    }
}

@media only screen and (max-width : 580px),
only screen and (max-device-width : 580px){
    nav li a {
        width: 50%;
        font: 400 12px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    nav li:nth-child(even) a {
        border-right: none;
    }

    nav li:nth-child(5) a, nav li:nth-child(6) a {
        border-bottom: 1px solid #fff;
    }
}

@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
    nav li a {
        font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
    }
}
4

1 回答 1

0

浮动你的 A 的右边而不是左边。

或者，切换到display: inline-block;设置，而不是使用浮点数。

jsfiddle：http: //jsfiddle.net/LbApX/

HTML：

  • 家
  • 家
  • 家
  • 家
  • 家
CSS： 导航 ul { 文本对齐：右；}

nav ul li {
    display: inline-block;
}
于 2013-02-01T17:26:35.230 回答