CSS плавать влево и вправо в абзаце с пролетом?

Question

До сих пор, когда у меня была одна строка с примером

предыдущий --- ширина страницы --- следующий

Я использовал контейнерный элемент с двумя дочерними элементами, стиль float: left & float: right

Я думаю, что это можно сделать из одной строки абзаца с диапазоном, может быть что-то вроде:

<p><span class="s-left">previous</span><span class="s-right">next</span></p>

Я пробовал CSS с:

span.s-left { text-align: left; }
span.s-right { text-align: right; }

но это не так ..

Answer 1

Это потому, что span по умолчанию отображается inline, поэтому у него нет определенной ширины для выравниваемого текста в (это очень простое описание, но оно пока подойдет).

Если вы хотите, чтобы текст по правому и левому краям был немного сложнее, просто:

p {
text-align: right;
}
span.s-left {
float: left;
}

Демонстрацию можно найти на JS Bin