Как перемещать встроенные элементы с помощью CSS

Question

Допустим, у меня есть следующая разметка:

<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>

как мне плавать 'view' и 'add' справа так, чтобы справа, чтобы они появлялись в том же порядке, что и HTML?

прямо сейчас, если я сделаю

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

я получу строку, которая выглядит следующим образом:

Modules                           Add View

но я хочу

Modules                           View Add

Это возможно только через CSS3 ?

edit : извините, я должен был упомянуть, у меня нет доступа к html.только css

Answer 1

Текст выровнять li вправо и плавать только 1-й a слева.

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

Я предполагаю, что вы уже скрыли маркеры списка по умолчанию .

Answer 2

Просто измените порядок.

<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>

Answer 3

Попробуйте использовать гибкую блочную модель CSS3 с явным распределением и свойством box-ordinal-group (http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/)) - и, если вы не можете заставить ее работать с плавающими элементами, возможно, она предлагает какую-то альтернативу для достижения того же эффекта. кроме этого, конечно, вы можете изменить порядок DOM или смоделировать макет другими способами, но это не рекомендуется, если вы хотите сохранить свою структуру.

Answer 4

реорганизуйте DOM так, чтобы Add был перед View, и разместил их справа.