• Modules View
    Geek Answers Handbook

    How to float inline elements using css

    says that I have the following markup:

    <ul class="editor"> <li> <a href="#">Modules</a> <a href="#">View</a> <a href="#">Add</a> </li> <li> <a href="#">Sections</a> <a href="#">View</a> <a href="#">Add</a> </li> </ul>

    how do I float 'view' and 'add' to the right so that the right so that they appear in the same order as html?

    right now if i do

     .editor li a:nth-child(2), .editor li a:nth-child(3){ float:right; }

    i get a string that looks like this:

     Modules Add View

    but I want

     Modules View Add

    Is this possible only through CSS3 ?

    edit : sorry i should have mentioned i dont have access to html. only css

    +4
    source share
    4 answers

    Align the text li to the right and place only the 1st a left.

     .editor li { text-align: right; } .editor li a:nth-child(1) { float: left; }

    I assume that you have already hidden the bullets by default.

    +4
    source

    Just change the order.

     <ul class="editor"> <li> <a href="#">Modules</a> <a href="#">Add</a> <a href="#">View</a> </li> <li> <a href="#">Sections</a> <a href="#">Add</a> <a href="#">View</a> </li> </ul>
    +2
    source

    Try using the CSS3 flexible box model with explicit distribution and the box-ordinal-group property ( http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/ ), and if you cannot To make it work with floats, perhaps it offers an alternative to achieve the same effect. In addition, of course, you can change the order of the DOM or simulate the layout in other ways, but this is not recommended if you want to keep your structure.

    +1
    source

    Reorganize your DOM to “Add” in front of the view and place them to the right.

    0
    source

    More articles:


    All Articles