Unordered List Navigation Bar: How to I make some buttons go to the right of the navigation page?


Tags: html,css,navigationbar

Problem :

I am making a simple navigation bar at the top with CSS and HTML (some code I have)

<ul>
    <li>Home</li>
    <li>About</li>
    <li>Products</li>
    <li>Contact</li>
    <li>Settings</li>
    <!--...-->
</ul>

and so on with a little CSS display:inline magic. That all works fine, except I want to move some of the links, like "Settings," to the other side of the navigation bar and replace it with a little icon. However, I cannot find how to do this. I've tried float:right and applying it to some of the list items using class and then referencing them through CSS. I've also tried text-align:right, but nothing seems to work. What am I doing wrong and how can I get some of the list items to be on the right side of the navigation bar?



Solution :

Try this ->

Working Demo

I have put the settings and the register on a div and added float:right to push it to the right.

If you want a image replace the text with <img/> tag


    CSS Howto..

    jQuery slideshow image delay

    How to specify font-size for all bold text in the div?

    How to copy external CSS and JavaScript in XSLT

    How to rotate and fade background images in and out with javascript/ASP.NET/CSS

    How can I vertically align text within a span element, or make the span the same size as the text?

    How to vertically align a form and image

    How to make jQuery slide open and close with CSS class

    How to change the color of the text next to an input field in an HTML form?

    How to disable animation in a specific element in CSS

    FontAwesome icon showing as black box. What CSS is needed to display icon?

    How to make a table scrollable with fixed header?

    How to edit menu in header - wordpress

    How to style multiple instances differently of the same jquery control?

    How to avoid blank lines at the top of new column (CSS columns)?

    How can I specify distance between list items?

    How to keep text in same position?

    How to preload style image to use it when server is down?

    How to style the NSString using CSS?

    CSS - How to add dot between navigation title

    How to make a shape which is made using css borders responsive?

    How to truncate paragragh lines in css [duplicate]

    How to - dynamically - change link text color in jQuery Mobile?

    How to use this jQuery to effect css opacity

    How to import packages within my Aurelia application

    css: how to position a X sign at the top right corner of the img element

    How to alternate background colour on DIV rows? (Jquery and/or CSS)

    HTML/CSS showing buttons online and auto going to next line

    How to style elements within other elements with css?

    How to append the Pseudo-class (active) to

    How to write syntax in internal css to external css?