Question

[主页按钮已列在“呼叫我们”和“关于”按钮之前，但出于某种原因，它会在这些按钮之后的右侧弹出。我只想在之后列出它并将所有这些列表保留在中心，我相信我的 CSS 文件有问题，我也是 stackoverflow 的新手，所以请在这篇文章中耐心等待。谢谢。] Image

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>

Answer 1

改变的对齐方式是因为你是 floating li 的右边 - 这意味着 DOM 中的第一个 li 在呈现时将是最右边的。只需删除它并添加一些 flex 样式以将 li 居中，一切都会起作用。

所以 - 将 display:flex 添加到 ul，并添加 align:center 使 li 垂直居中，justify-content: center 使 li 在导航元素内水平居中。

另外 - 你有一个 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>

导航栏列表未居中

1 个答案: