格式化菜单栏的问题答案

【问题标题】：Problems with formatting menu bar格式化菜单栏的问题
【发布时间】：2015-03-02 16:25:57
【问题描述】：

我使用包含“li”的“ul”制作了一个菜单栏，它一直以相反的顺序显示，直到我添加：.nav-bar .btn{ float: left; } .nav-bar ul{ float: right; }

但在我这样做之后，所有按钮都重叠且太小。有谁知道如何修复这个？

【问题讨论】：

【解决方案1】：

我删除了<ul> 中的<div> 标签并添加了填充。这是一个例子。您可以根据需要或所需的 UI 对其进行修改。

/*----------nav-bar-----------*/
 .nav-bar {
    width: 100%;
    top: 0;
    left: 0;
    position: fixed;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.75);
    height: auto;
    z-index: 1;
}
.nav-bar .logo {
    top: 0;
    width: 150px;
    position: absolute;
    left: 1%;
    height: 90%;
    display: block;
}
.nav-bar .btn {
    width: 21%;
    
    padding-bottom: 1.2%;
   
    float: left;
    display: block;
    list-style:none;
    border-bottom: 2px solid #777777;
    text-shadow: 2px 2px 4px #000000;
    margin-bottom: 0;
}
.nav-bar ul {
    float: right;
}
.nav-bar a {
    
    padding-right: 40px;
    padding-top: 12.5%;
    width: 100%;
    padding-bottom: 2%;
    text-decoration: none;
    color: #777777;
    bottom: 0;
}

    <body>
        <div class="nav-bar">
            <img class="logo" src="logo.png" />
            <div class="container">
                <ul>
                  
                        <li class="btn"> 
                            <a href="#">Home</a>
                        </li>
                   
                        <li class="btn"> 
                            <a href="#">About</a>
                        </li>
                  
                        <li class="btn"> 
                            <a href="#">Services</a>
                        </li>
                    
                        <li class="btn selected"> 
                            <a href="#">Contact</a>

                        </li>
                   
                </ul>
            </div>
        </div>
    </body>

【讨论】：

修复了它。有什么办法可以将按钮推到右边缘？比如“联系人”按钮是否触摸了屏幕的右边缘？