html - Navigation bar lists aren't being centered

Question

Ask a Question

Welcome To Ask or Share your Answers For Others

html - Navigation bar lists aren't being centered

asked Oct 7, 2021 in Technique[技术] by 深蓝 (71.8m points)

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

94 views

1 Answer

深蓝 · Answer 1 · 2021-10-06T18:39:42+0000

The altered alignment is because you are floating the li's to the right - which means the first li in the DOM will be the most right when rendered. Simply remove this and and add some flex styling to center the li's and it will all work.

So - add display:flex to the ul, and align:center to center the li's vertically and justify-content: center to center the li's horizontally within the nav element.

Also - you have a div as a direct child of the ul - this is not semantically correct - you need to put that div inside an li to make it valid 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>

Categories

html - Navigation bar lists aren't being centered

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags