导航栏列表未居中

debugcn 发表于 Dev

勒涅加德杰夫

[主页按钮已在“呼叫我们”和“关于”按钮之前列出，但是由于某些原因，它在这些按钮之后的右侧弹出。我只希望它在以后列出，并将所有这些列表放在中间，我认为我的CSS文件有问题，我也是stackoverflow的新手，所以请允许我在这篇文章上接受。谢谢。]图片

body{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}


ul {
    list-style-type: none;

    padding: 1.2%;
    margin:0;
    overflow: hidden;
    background-color: #000000;
}

li {

    float: right;
}

li a {
    font-size: 18px;
    font-weight: bold;
    display: block;
    color: white;
    text-align: center;
    padding: 26px 26px;
    text-decoration: none;
    transition: 0.3s;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
    background-color: #3498DB ;
}

.dropdown {
    float: right;
    overflow: hidden;
}


.dropdown .dropbtn {
    font-weight: bold;
    font-size: 18px;
    border: none;
    outline: none;
    color: white;
    display: block;
    padding: 26px 26px;
    background-color: inherit;
    font-family: sans-serif; /* Important for vertical align on mobile phones */
    margin: 0; /* Important for vertical align on mobile phones */
    transition: 0.3s;
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
    background-color: #3498DB;
}

/* Dropdown content (hidden by default) */
.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;

}

/* Links inside the dropdown */
.dropdown-content a {
    font-family: sans-serif;
    font-weight: bold;
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
    background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

<!doctype html>
<html>
    <head>
        <title> IBS TEST </title>
        <link rel="stylesheet" type="text/css" href="CSS/style.css">
    </head>

<body>

<header>

    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>


            <div class="dropdown">
                <button class="dropbtn">About Us
                    <i class="fa fa-caret-down"></i>
                </button>
                <div class="dropdown-content">
                    <a href="PAGES/who.html">Who we are?</a>
                    <a href="PAGES/contact.html">Contact Us</a>

                </div>
            </div>
           <li><a href="tel:+6166161">Call Us</a></li>

        </ul>
    </nav>



</header>


<b>this is home</b>

</body>


</html>

加夫格里夫

更改后的对齐方式是因为您floating位于右边的li-这意味着DOM中的第一个li在渲染时将是最右边的。只需删除它，然后添加一些弯曲样式以使li居中即可，所有这些都将起作用。

所以-添加display:flex到ul中，并在nav元素内将align:centerli的垂直居中对齐，并将justify-content: centerli的水平居中对齐。

另外-您有一个div作为ul的直接子元素-这在语义上是不正确的-您需要将该div放在li内以使其成为有效的html。

body{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}



ul {
    list-style-type: none;
    padding: 1.2%;
    margin:0;
    overflow: hidden;
    background-color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
}


li a {
    font-size: 18px;
    font-weight: bold;
    display: block;
    color: white;
    text-align: center;
    padding: 26px 26px;
    text-decoration: none;
    transition: 0.3s;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
    background-color: #3498DB ;
}

.dropdown {
    overflow: hidden;
}


.dropdown .dropbtn {
    font-weight: bold;
    font-size: 18px;
    border: none;
    outline: none;
    color: white;
    display: block;
    padding: 26px 26px;
    background-color: inherit;
    font-family: sans-serif; /* Important for vertical align on mobile phones */
    margin: 0; /* Important for vertical align on mobile phones */
    transition: 0.3s;
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
    background-color: #3498DB;
}

/* Dropdown content (hidden by default) */
.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;

}

/* Links inside the dropdown */
.dropdown-content a {
    font-family: sans-serif;
    font-weight: bold;
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
    background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

<!doctype html>
<html>
    <head>
        <title> IBS TEST </title>
        <link rel="stylesheet" type="text/css" href="CSS/style.css">
    </head>

<body>

<header>

    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li>
              <div class="dropdown">
                <button class="dropbtn">About Us
                    <i class="fa fa-caret-down"></i>
                </button>
                <div class="dropdown-content">
                    <a href="PAGES/who.html">Who we are?</a>
                    <a href="PAGES/contact.html">Contact Us</a>

                </div>
            </div>
           </li>
           <li><a href="tel:+6666">Call Us</a></li>

        </ul>
    </nav>



</header>


<b>this is home</b>

</body>


</html>