如何使我的垂直导航栏水平

Question

I recently made a vertical navigation bar and was wondering how I could make it horizontal and make it display in the same sized boxes equally spaced apart

I have tried to float text to the left but that doesn't work as well as followed W3 School tutorial on creating a horizontal navigation bar. W3 School isn't useful. I am a HTML and CSS newbie.

 ul { list-style-type: none; margin: 0px; padding: 0px; overflow: hidden; width: 100px; border: 1px solid; } li a { display: block; color: #000000; padding: 8px 16px; text-decoration: none; text-align: center; border: 1px; border-bottom: 1px solid; } li:last-child a { border-bottom: none; } li a:hover { background-color:red; color:white; }

 <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="services.html">Services</a></li> <li><a href="contact.html">Contact</a></li> <li><a href="#">LinkedIn</a></li> </ul>

I expect a horizontal navigation bar that is centred and equally spaced apart in the same sized boxes that appear.

Answer 1

Start changing display property and add it to li element like the following snippet. You must play with the values and the properties to achieve what you need.

 ul { font-size: 0; list-style-type: none; margin: 0px; padding: 0px; overflow: hidden; border: 1px solid; } ul li { display: inline-block; list-style-type: none; width: 20%; font-size: 1rem; } li a { color: #000000; padding: 8px 16px; text-decoration: none; text-align: center; border: 1px; border-bottom: 1px solid; } li:last-child a { border-bottom: none; } li a:hover { background-color:red; color:white; }

 <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="services.html">Services</a></li> <li><a href="contact.html">Contact</a></li> <li><a href="#">LinkedIn</a></li> </ul>

Answer 2

Use flex . You can read more about it here .

 ul { list-style-type: none; display: flex; align-items: center; justify-content: center; margin: 0px; padding: 0px; width: 400px; border: 1px solid; } li a { display: block; color: #000000; padding: 8px 16px; text-decoration: none; text-align: center; border: 1px; border-bottom: 1px solid; } li:last-child a { border-bottom: none; } li a:hover { background-color: red; color: white; }

 <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="services.html">Services</a></li> <li><a href="contact.html">Contact</a></li> <li><a href="#">LinkedIn</a></li> </ul>