Question

我对使用this tutorial制作的自适应菜单有疑问，实现起来非常简单，我也会在这里添加代码。

如果你转到my page here，你会发现我底部有一个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;
    }
}

Answer 1

将A的右侧漂浮而不是左侧。

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

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

<强> HTML：

主页
主页
主页
主页
主页

的 CSS： nav ul { text-align：right; }

nav ul li { display: inline-block; }

如何将响应式菜单移到右侧？

1 个答案: