How to allow the navbar (and possibly other things) to end on the right
So I have a problem with the navbar. I have set its width to 100%. But I would like to see the end because it got rounded corners ...
So: | (=======) |
Dislike now: | (========== |
#nav {
height: 60px;
font-size: 30px;
line-height: 60px;
vertical-align: middle;
text-align: center;
background-color: #0080FF;
width: 100%;
border: 10px solid #16044E;
border-radius: 20px;
z-index: 1;
}
#nav ul {} #nav li {
display: inline;
text-align: center;
margin: 20px;
}
#nav a {
color: white;
text-decoration: none;
}
<ul id="nav">
<li><a href="">Home</a>
</li>
<li><a href="">Courses</a>
</li>
<li><a href="">Subjects</a>
</li>
<li><a href="">Sign Up</a>
</li>
<li><a href="">Log In</a>
</li>
</ul>
You can use calc
to shrink 10px
from the total width ( 10px
= border-width
). But you should try box-sizing:border-box
as browser support for Caniuse iscalc
limited
#nav {
height: 60px;
font-size: 30px;
line-height: 60px;
vertical-align: middle;
text-align: center;
background-color: #0080FF;
width: calc(100%-10px);
border: 10px solid #16044E;
border-radius: 20px;
z-index: 1;
}
#nav ul {
}
#nav li {
display: inline;
text-align: center;
margin: 20px;
}
#nav a {
color: white;
text-decoration: none;
}
<ul id="nav">
<li><a href="">Home</a></li>
<li><a href="">Courses</a></li>
<li><a href="">Subjects</a></li>
<li><a href="">Sign Up</a></li>
<li><a href="">Log In</a></li>
</ul>
Add this to your #nav
box-sizing: border-box;
This will make yours width: 100%;
applicable to the border portion.
You can use the calc()
CSS callback function in case you need to support older browsers, here is the current support and you should add this to yours #nav
:
#nav{
width: 98%;
calc(100%-10px);
}
Another approach is to change the element of the box-sizing
element #nav
, so the border will be part of the width of the element, you may have to update a few rules in CSS, but it will work in IE8 +, all mobile and all modern browsers, here caniuse :
#nav{
padding-left: 10px;
width: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Change #nav
as follows:
Change width: 100%;
towidth: auto;
Yours #nav
should look like this:
#nav {
height: 60px;
font-size: 30px;
line-height: 60px;
vertical-align: middle;
text-align: center;
background-color: #0080FF;
width: auto;
border: 10px solid #16044E;
border-radius: 20px;
z-index: 1;
}