Reputation:
i have got a list which appears horizontal on my html. but i would like the first 4 elements to appear in the middle of the screen with the same gap between them and then i want the last element in the list to be in the top right hand corner?
<ul id="navigationBarList">
<li><a href="#About">About</a></li>
<li><a href="#Bookings">Bookings</a></li>
<li><a href="#Blog">Blog</a></li>
<li><a href="#Pricing">Pricing</a></li>
<li><a href="#Sign In">Sign In</a></li>
</ul>
everything I have tried has not worked so far. I assume it would be about giving an id or something to the individual items but that for some reason has zero effect
this is the css:
#navigationBarList{
display: inline-block;
margin: 0;
margin-right: 10px;
padding: 10px;
background-color: black;
font-size: 25px;
color: red;
width: 100%;
}
#navigationBarList li{
display: inline;
width: 100px;
margin-right: 20px;
}
Upvotes: 0
Views: 78
Reputation: 204
You could do it like this. Using "margin: auto" to center align the text and adding an extra container. I also assume you want the space between link text to be equal and not the whole width that each link spans.
#navigationBar{
display: block;
position:relative;
margin-right: 10px;
padding: 10px;
background-color: black;
font-size: 25px;
color: red;
width: 100%;
}
#navigationBarList{
display: block;
margin:auto;
width:600px;
}
#navigationBarList li{
display: inline;
margin-right: 20px;
margin-left:20px;
}
#navigationBarList li:last-child{
position:absolute;
right:20px;
}
<div id="navigationBar">
<ul id="navigationBarList">
<li><a href="#About">About</a></li>
<li><a href="#Bookings">Bookings</a></li>
<li><a href="#Blog">Blog</a></li>
<li><a href="#Pricing">Pricing</a></li>
<li><a href="#Sign In">Sign In</a></li>
</ul>
</div>
Upvotes: 0
Reputation: 115108
It's not 'really' a menu item as such in this context. Use a different element outside of the menu which can then be positioned anyway you want.
#navigationBarList {
display: inline-block;
margin: 0;
margin-right: 10px;
padding: 10px;
background-color: black;
font-size: 25px;
color: red;
width: 100%;
text-align: center;
}
#navigationBarList li {
display: inline-block;
width: 100px;
margin-right: 20px;
}
a {
text-decoration: none;
color: white;
}
nav {
position: relative;
}
#login {
position: absolute;
top: 0;
right: 0;
margin: 0.25em;
}
<nav>
<ul id="navigationBarList">
<li><a href="#About">About</a>
</li>
<li><a href="#Bookings">Bookings</a>
</li>
<li><a href="#Blog">Blog</a>
</li>
<li><a href="#Pricing">Pricing</a>
</li>
</ul>
<a id="login" href="#Sign In">Sign In</a>
</nav>
NOTE: - I should point out that you can still leave the #SignIn
link as a list item if you so wish but, in that case, the parent ul
should receive position:relative
to achieve the same effect.
Upvotes: 2
Reputation: 1941
You could use a psuedo-selector for the last element
#navigationBarList li:last{ /* css */ }
Or give it an ID and style just that ID which will have more specificity
<li id="signin"><a href="#Sign In">Sign In</a></li>
#navigationBarList li#signin{ /* css */ }
Upvotes: 0