CODEWITHSUNDEEP
htmlcss
Jimmy
Jimmy

Reputation: 12517

Get list items to appear all on one line

Here is my code: http://jsfiddle.net/DFN5y/

As you can see the list items on the right are on the line below. Can anyone please tell me how to remedy this? This is my code:

<ul id="nav">
    <li><a href="features.html">Features</a></li>
    <li><a href="pricing.html">Pricing</a></li>
</ul>

<ul id="nav" style="float:right;">
    <li><a href="signup.html">Sign up</a></li>
    <li><a href="login.html">Login</a></li>
</ul>

Upvotes: 0

Views: 129

Answers (6)

Milan and Friends
Milan and Friends

Reputation: 5610

You could set them inline by making ul as inline-block element

ul {
  display: inline-block;
}

but you have two nav's and duplicate id's so look at the example below and try to follow that style in future coding

<ul id="nav">
  <li><a href="features.html">Features</a></li>
  <li><a href="pricing.html">Pricing</a></li>
  <li class="right"><a href="signup.html">Sign up</a></li>
  <li class="right"><a href="login.html">Login</a></li>
</ul>


#nav li {
  display: inline-block;
  padding-left: 40px;
}
.right{ 
  float: right;
}

or you could float them without class e.g.

#nav li:nth-child(3),
#nav li:nth-child(4) {
  float: right;
}

or even simpler by moving just third element e.g.

#nav li:nth-child(n+3) {
  float: right;
}

FIDDLE

Upvotes: 1

advert665
advert665

Reputation: 10374

You'd be better off adding them all to the same ul element and then using the :nth-child pseudo-selector to add additional padding to the middle elements to create the separation you want.

http://jsfiddle.net/DFN5y/17/

ul li:nth-child(3){ padding-left: 20%; background: red; }

Upvotes: 0

collapsar
collapsar

Reputation: 17258

Have a look at this fiddle.

Basically i have changed the original in 4 ways:

  • replaced the id nav, which had been issued twice, by a class of the same name
  • distinguished between the first and the second nav-ul in css formatting
  • moved the style dfinitions from the element attribute to the css (somehow the float rule messed up teh alignment)
  • all nav-ul being displayed as inline-block to assue verticla alignment.

Upvotes: 0

Laurent S.
Laurent S.

Reputation: 6947

Just add this to your CSS :

ul{ display : inline-block;}

And please change the id's of your ùl`tags so that they are different ! Id's should be unique on the page.

Upvotes: 0

G.L.P
G.L.P

Reputation: 7217

Fiddle Try:

ul li {
    display: block;
    float:left;
    padding-left: 40px;
}

Upvotes: 0

Richa
Richa

Reputation: 4270

your #nav is having 100% width and does not have float, thats why its taking complete space till right edge. 

#nav {
       float: left;
       padding-left: 100px;
    }

Upvotes: 0

Related Questions