Make an item in list align to right using CSS 3

Question

I have a list as follows:

<ul id="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">Work</a>
      <ul>
           <li><a href="#">CSS Development</a></li>
           <li><a href="#">Graphic Design</a></li>
           <li><a href="#">Development Tools</a></li>
           <li><a href="#">Web Design</a></li>
      </ul>
  </li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact Us</a></li>
  <li><a href="#">Feedback</a></li>
</ul>

I am attaching an image of so far what I have done.

In this menu, I want to align feedback to the right side. How can I do it?

I have taken this sample from this site : http://www.red-team-design.com/css3-dropdown-menu — user2091061, May 07 '13 at 17:53
Just added feedback option to this sample. I want it to be aligned to right side — user2091061, May 07 '13 at 17:54

score 30 · Accepted Answer · edited Aug 11 '21 at 09:05

30

Add this to your CSS content.

li:last-child will select the last li of the menu list.

Demo

#menu > li:last-child
{
    float:right;
}

edited Aug 11 '21 at 09:05

Peter Mortensen

30,738
21
105
131

answered May 07 '13 at 17:56

PSL

123,204
21
253
243

Thanks...! This worked perfectly... i tried it by writing #menu:last-child{ float : right; } , but this didn't work... can u tell whats the difference between two styles? – user2091061 May 07 '13 at 17:59
` #menu:last-child` will try to selct the last item with the id #menu, so it doesn't select `last li` as you wanted. – PSL May 07 '13 at 18:01
This method `>` doesn't work with all browsers. http://stackoverflow.com/questions/4459821/css-selector-what-is-it – AbsoluteƵERØ May 07 '13 at 18:01
1

Only for IE7 below if is not supported.. https://developer.mozilla.org/en-US/docs/CSS/Child_selectors – PSL May 07 '13 at 18:03
@user2091061 I woulod suggest you not to use inline-style instead you should go with css class only... – PSL May 07 '13 at 18:06

score 10 · Answer 2 · answered May 07 '13 at 17:56

Just use float: right;:

<ul id="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">Work</a>
      <ul>
           <li><a href="#">CSS Development</a></li>
           <li><a href="#">Graphic Design</a></li>
           <li><a href="#">Development Tools</a></li>
           <li><a href="#">Web Design</a></li>
      </ul>
  </li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact Us</a></li>
  <li style="float: right;"><a href="#">Feedback</a></li>
</ul>

You can check the demo here.

score 6 · Answer 3 · edited Aug 11 '21 at 09:06

6

Aside from float you can also use position:absolute inside of a position:relative container. (Inline CSS for example purposes only.)

<ul id="menu" style="position:relative;width:1008px;height:40px;display:block;">
 <li class="right" style="position:absolute;right:20px;">
    <a href="#">Feedback</a></li>

edited Aug 11 '21 at 09:06

Peter Mortensen

30,738
21
105
131

answered May 07 '13 at 17:59

AbsoluteƵERØ

7,816
2
24
35

score 1 · Answer 4 · answered Feb 22 '22 at 17:48

I had the same question but for the whole list.

Float does not realy work there, so here is what worked for me:

ul{
  direction:rtl;
}

This way all your li elements including their ::marker's will be pulled to the right of the parent container.

You can also combine this with selectors to just move single li elements.

ul:first-child,
ul:nth-child(2),
ul:last-child{
  direction:rtl;
}

score 0 · Answer 5 · answered Oct 26 '16 at 19:12

This will pull the entire menu to the right and have the dropdown sub menu pull right also instead of displaying off the screen.

 <div class="top-menu">
    <ul class="nav navbar-nav pull-right"><li class="dropdown dropdown-user">
         <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
          <i class="icon-settings"></i>
          <i class="fa fa-angle-down"></i>
        </a>
       <ul class="dropdown-menu pull-right">
          <li>
            <a href="page_user_profile_1.html">
              <i class="icon-user"></i> My Profile
            </a>
         </li>
      </ul>
    </li>
  </ul>
</div>

Make an item in list align to right using CSS 3

5 Answers5