Question

我正在制作自定义的响应式菜单。在我的菜单上有两个链接注销和网站前面，我需要向右浮动。在桌面模式下到另一边。我试过浮动，但不能让它们都对齐。

当移动视图我需要浮动的右链接才能正常垂直。

您可以在此处查看示例：http://codepen.io/riwakawebsitedesigns/pen/GgLjmL和http://codepen.io/riwakawebsitedesigns/full/GgLjmL/

最好的方法是什么。

HTML

<div class="container-menu">
<a class="toggleMenu" href="#">Menu</a>
<ul id="menu">
    <li><a href="">Dashboard</a></li>
    <li><a href="#">Catalog</a>
        <ul>
            <li><a href="">Categories</a></li>
            <li><a href="">Categories</a></li>
        </ul>
    </li>
    <li><a href="#">Extensions</a>
        <ul>
            <li><a href="">Modules</a></li>
        </ul>
    </li>
    <li><a href="#">Sales</a>
        <ul>
            <li><a href="#" class="top">Customers</a>
                <ul>
                    <li><a href="#">Customers</a></li>
                    <li><a href="#">Customer Group</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">System</a>
        <ul>
            <li><a href="">Setting</a></li>
            <li><a href="#" class="top">Design</a>
                <ul>
                    <li><a href="#">Layouts</a></li>
                    <li><a href="#">Banners</a></li>
                </ul>
            </li>
            <li><a href="#" class="top">Users</a>
                <ul>
                    <li><a href="#">User</a></li>
                    <li><a href="#">User Group</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="">Website Front</a></li>
    <li><a href="">Logout</a></li>
</ul>
</div>

<div class="container-fluid">
<div class="row" style="margin-top: 10px;">
<div class="col-lg-12">
<div class="alert alert-danger">Test</div>
</div>
</div>
</div>

CSS

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

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
}

a {
    text-decoration: none;
}

.container-menu {
    width: 100%;
    margin: 0 auto;
}

.right {
    float: right;
}

.toggleMenu {
    display:  none;
    background: #666;
    padding: 10px 15px;
    color: #fff;
}
#menu {
    list-style: none;
    *zoom: 1;
    background: rgba(0,0,0,1);
    background: rgba(19,19,19,1);
    background: -moz-linear-gradient(top, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(19,19,19,1)), color-stop(0%, rgba(17,17,17,1)), color-stop(0%, rgba(102,102,102,1)), color-stop(0%, rgba(43,43,43,1)), color-stop(2%, rgba(44,44,44,1)), color-stop(4%, rgba(71,71,71,1)), color-stop(27%, rgba(61,61,61,1)), color-stop(100%, rgba(28,28,28,1)));
    background: -webkit-linear-gradient(top, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%);
    background: -o-linear-gradient(top, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%);
    background: -ms-linear-gradient(top, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%);
    background: linear-gradient(to bottom, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#131313', endColorstr='#1c1c1c', GradientType=0 );
}

#menu:before,
#menu:after {
    content: " "; 
    display: table; 
}

#menu:after {
    clear: both;
}

#menu ul {
    list-style: none;
}

#menu a {
    padding: 10px 15px;
    color:#fff;
    text-decoration: none
}

#menu li {
    position: relative;
}

#menu > li {
    float: left;
}

#menu > li > a {
    display: block;
}

#menu li  ul {
    position: absolute;
    left: -9999px;
}

#menu > li.hover > ul {
    left: 0;
}
#menu li li.hover ul {
    left: 100%;
    top: 0;
}

#menu ul .top {
    background-image: url('./images/arrow-right.png'); 
    background-position: 95% center;
    background-repeat:no-repeat;
}

#menu li li a {
    display: block;
    background: black; /* A grey background */
    opacity: 0.7; /* 80% opacity */
    position: relative;
    z-index:100;
    width: 147px;
}

#menu li li li a {
    background: black; /* A grey background */
    opacity: 0.7; /* 80% opacity */

    z-index:200;
}

@media screen and (max-width: 768px) {
    .active {
        display: block;
    }
    #menu > li {
        float: none;
    }

    #menu li li a {
        width: 100%;
    }

    #menu ul {
        display: block;
        width: 100%;
    }
    #menu > li.hover > ul , #menu li li.hover ul {
        position: static;
    }

}

Answer 1

您可以执行以下操作：

HTML

  <li class='float-right'><a href="">Website Front</a></li>
    <li class='float-right'><a href="">Logout</a></li>

CSS

.float-right{
   float:right!important;
}

示例： http://codepen.io/anon/pen/yyraQX

Answer 2

如果您的菜单计数已修复，您可以按nth-of-type选择并添加浮点数：右;

http://codepen.io/anon/pen/qEwaMJ

这是代码。但如果您不知道菜单元素的数量，则添加特殊类并按类选择

菜单链接不浮动到右边

2 个答案: