Question

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

但是在我做完之后所有的按钮都重叠而且太小了。有谁知道如何解决此？

Answer 1

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

＆＃13;

/*----------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;
}

＆＃13;

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

＆＃13;

格式化菜单栏的问题

1 个答案: