How can I center my nav bar, but still appear as a line in the top of the site? I know i must change something in the css file where li is built, but i can't figure it out. The code is:
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li><a href="index.html">Tab 1</a></li>
<li><a href="index.html">Tab 2</a></li>
<li><a href="index.html">Tab 3</a></li>
<li><a href="index.html">Tab 4</a></li>
</ul>
And the css file is like:
ul {
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #791519;
}
I would wrap it in an NAV tag and set on the NAV tag text-align to center.
nav {
text-align:center;
}
ul {
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
margin:0 auto;
}
<nav>
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li><a href="index.html">Tab 1</a></li>
<li><a href="index.html">Tab 2</a></li>
<li><a href="index.html">Tab 3</a></li>
<li><a href="index.html">Tab 4</a></li>
</ul>
</nav>
I recommend using Flex Box :
ul { display: flex; flex-direction: row; align-items: stretch; list-style-type: none; width:100%; padding: 0; overflow: hidden; background-color: #333; } li{ flex-grow: 1; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover:not(.active) { background-color: #111; } .active { background-color: #791519; }
<ul> <li><a class="active" href="index.html">Home</a></li> <li><a href="index.html">Tab 1</a></li> <li><a href="index.html">Tab 2</a></li> <li><a href="index.html">Tab 3</a></li> <li><a href="index.html">Tab 4</a></li> </ul>
Maybe this (add wrap and text-align: center):
.center { margin: 0 auto; text-align: center; } ul { display: inline-block; list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover:not(.active) { background-color: #111; } .active { background-color: #791519; }
<div class="center"> <ul> <li><a class="active" href="index.html">Home</a></li> <li><a href="index.html">Tab 1</a></li> <li><a href="index.html">Tab 2</a></li> <li><a href="index.html">Tab 3</a></li> <li><a href="index.html">Tab 4</a></li> </ul> </div>
You can make this by changing the position of ul Check the following css changes for ul
ul { display: inline-block; list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; position:relative; left:100px; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover:not(.active) { background-color: #111; } .active { background-color: #791519; }
<ul> <li><a class="active" href="index.html">Home</a></li> <li><a href="index.html">Tab 1</a></li> <li><a href="index.html">Tab 2</a></li> <li><a href="index.html">Tab 3</a></li> <li><a href="index.html">Tab 4</a></li> </ul>
Hope this helps
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.