格式化菜单栏的问题

Question

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

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

Answer 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>

格式化菜单栏的问题

Problems with formatting menu bar

html

css

menu

html-lists

css-float