How to float inline elements with css

lets say 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 the html?

right now if i do

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

i will get a row that looks like:

Modules                           Add View

but i want

Modules                           View Add

Is this possible ju开发者_如何转开发st via CSS3?

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

Text-align the li right and float only the 1st a left.

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

I assume that you've already hidden the default list bullets.

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>

Try 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 can't make it work with floats, maybe it offers some alternative of attaining the same effect. Other than that, of course you can change the DOM order or simulate the layout by other means, but that's not advisable if you want to preserv your structure.

reorganize your DOM so that Add is before View and float them to right.