Невозможно использовать float с селектором nth-child, чтобы получить 2 из 3 якорей справа от моей страницы

Question

У меня есть HTML-страница, где у меня есть 3 якоря в упорядоченном списке.последние два якоря должны быть справа от страницы.Я понимаю, что лучший способ сделать это включает использование селекторов nth-child.Я попытался создать 3 экземпляра, по одному для указания каждого якоря, и это не удалось.Я мог бы получить один из экземпляров справа от страницы, но не два.Я попытался, как вы увидите в моем коде, использовать '2n + 1', но это также не сработало.

Я немного застрял, и любой совет будет принят с благодарностью!

http://jsfiddle.net/MwT6d/

Answer 1

как насчет этого:

http://jsfiddle.net/MwT6d/7/

Answer 2

http://jsfiddle.net/hr7uz/1/

В вашем случае, чтобы использовать селектор nth-child, я бы сделал следующее.

div.content ul li a:nth-child(1) {
  float: left;
}

div.content ul li a:nth-child(n+2) {
  float: right;
}
div.content ul li{clear:right}

Кажется, что остальная часть вашего CSS работает нормально.Затем я добавил бы некоторые поля или отступы к тем ссылкам, которые были перемещены прямо, и вы пошли.

Лично, как бы я это сделал, я установил бы все соответствующие ссылки как плавающие правильно, а затем установил для first-child значениеплыть налево.Это все равно что думать о проблеме задом наперед.

Answer 3

Может быть, это:

div.content ul li { 
    list-style-type: none;
    clear: left;
}

[...]

div.content ul li a:nth-last-child(-n+2) {
    float: right;
}

Таким образом, вы устанавливаете на float: right только два последних потомка <a> каждого <li>, а затем очищаете поплавок на каждом <li>.