Question

我无休止地搜索了一个解决方案，将我的下拉导航栏集中在我的网站上。

我试过从我的CSS中删除代码float：left代码并添加了代码display：inline-block：但似乎没有任何工作。我尝试了几种解决方案，但他们要么从顶部移动我的导航栏，要么删除了我为导航栏设置的背景。

如果我可以获得一些关于导航栏居中的帮助而不删除导航栏的背景或替换它，那就太棒了。

＆＃13;

    html {
      background-image: url(../images/RL_bg.gif);
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
    }
    
    li {
      float: left;
    }
    
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
    }
    
    li a, .dropbtn {
      display: inline-block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
    
    li a:hover, .dropdown:hover .dropbtn {
      background-color: red;
    }
    
    li.dropdown {
      display: inline-block;
    }
    
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }
    
    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
    }
    
    .dropdown-content a:hover {background-color: #f1f1f1}
    
    .dropdown:hover .dropdown-content {
      display: block;
    }

＆＃13;

<!DOCTYPE <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Rocket League</title>
        <link href="css/styles.css" rel="stylesheet" type="text/css">
    </head>
    <header>
            <ul>
                <li class="dropdown">
                    <a href="javascript:void(0)" class="dropbtn">Homepage</a>
                    <div class="dropdown-content">
                        <a href="gameinfo.html">What is Rocket League?</a>
                        <a href="gameplay.html">Gameplay</a>
                        <a href="plat.html">Platforms</a>
                    </div>
                <li class="dropdown">
                    <a href="javascript:void(0)" class="dropbtn">Cars</a>
                    <div class="dropdown-content">
                        <a href="stdcar.html">Standard</a>
                        <a href="dlc.html">Downloadable Content</a>
                        <a href="platexc.html">Platform Exclusive</a>
                    </div>
                <li class="dropdown">
                    <a href="javascript:void(0)" class="dropbtn">Online Content</a>
                    <div class="dropdown-content">
                        <a href="mult.html">Multiplayer</a>
                        <a href="comp.html">Competitve</a>
                    </div>
                <li class="dropdown">
                    <a href="javascript:void(0)" class="dropbtn">Maps</a>
                    <div class="dropdown-content">
                        <a href="std.html">Standard</a>
                        <a href="exp.html">Experimental</a>
                    </div>
                <li class="dropdown">
                    <a href="javascript:void(0)" class="dropbtn">Crates</a>
                    <div class="dropdown-content">
                        <a href="itemcust.html">Item Customization</a>
                        <a href="trading.html">Trading</a>
                    </div>
                <li class="dropdown">
                    <a href="javascript:void(0)" class="dropbtn">About Me</a>
                    <div class="dropdown-content">
                        <a href="purpose.html">Purpose of This Site</a>
                        <a href="aboutme.html">About The Creator</a>
                    </div>
                </li>
            </ul> 
    </header>
    <body>
        <h1></h1>
    </body>
    </html>

＆＃13;

Answer 1

你想要为你的ul创建一个id，在你的整个列表中做这个标记。然后你可以将它用于css。

 #navmenu {
       margin: 0 auto;
       width: 500px;
     }

 #navmenu a {
        width: 100px;
        text-align: center;
       }

因此，如果您使用内联列表，这将有效。让我知道这个解决方案是否有用，因为我们可以专门为你的css / html定制它。

以下拉导航为中心

1 个答案: