user1856576
user1856576

Reputation:

how to add different sized gaps between the different items in a html list?

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

Answers (3)

user3589536
user3589536

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

Paulie_D
Paulie_D

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

Zach Leighton
Zach Leighton

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

Related Questions