CODEWITHSUNDEEP
htmlcss
Jess
Jess

Reputation: 43

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 just via CSS3?

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

Upvotes: 4

Views: 1091

Answers (4)

entonio
entonio

Reputation: 2173

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.

Upvotes: 1

BalusC
BalusC

Reputation: 1109855

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.

Upvotes: 4

cvsguimaraes
cvsguimaraes

Reputation: 13260

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>

Upvotes: 2

yoka
yoka

Reputation: 106

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

Upvotes: 0

Related Questions