Как я могу выровнять текст влево и текст вправо в одной строке?

Как я могу выровнять текст так, чтобы часть его выравнивалась влево, а часть его выравнивалась вправо в пределах одной строки?

<p>This text should be left-aligned. This text should be right aligned.</p>

Я могу выровнять весь текст влево (или вправо), либо напрямую в строке, либо используя таблицу стилей -

<p style='text-align: left'>This text should be left-aligned. 
    This text should be right aligned.</p>

Как я могу выровнять соответствующий текст влево и вправо, сохраняя его в одной строке?

Ответы

Ответ 1

<p style="text-align:left;">
    This text is left aligned
    <span style="float:right;">
        This text is right aligned
    </span>
</p>

Ответ 2

HTML:

<span class="right">Right aligned</span><span class="left">Left aligned</span>​

css:

.right{
    float:right;
}

.left{
    float:left;
}

Демо:
http://jsfiddle.net/W3Pxv/1

Ответ 3

Если вы не хотите использовать плавающие элементы и хотите, чтобы оба блока не перекрывались, попробуйте:

<p style="text-align: left; width:49%; display: inline-block;">LEFT</p>
<p style="text-align: right; width:50%;  display: inline-block;">RIGHT</p>

Ответ 4

HTML FILE:

<div class='left'> Left Aligned </div> 
<div class='right'> Right Aligned </div>

ФАЙЛ CSS:

.left
{
  float: left;
}

.right
{
  float: right;
}

и вы закончили....

Ответ 5

<h1> left <span> right </span></h1>

CSS

h1{text-align:left; width:400px; text-decoration:underline;}
span{float:right; text-decoration:underline;}

Ответ 6

Хотя некоторые решения здесь будут работать, ни одно из них не будет перекрывать друг друга и в конечном итоге переместит один элемент ниже другого. Если вы пытаетесь расположить данные, которые будут динамически связаны, вы не узнаете до времени выполнения, что они выглядят плохо.

Что мне нравится делать, так это просто создать одну таблицу строк и применить правильный float ко второй ячейке. Нет необходимости применять выравнивание по левому краю для первого, что происходит по умолчанию. Это отлично справляется с наложением слов.

HTML

<table style="width: 100%;">
  <tr><td>Left aligned stuff</td>
      <td class="alignRight">Right aligned stuff</td></tr>
</table>

CSS

.alignRight {
  float: right;
}

https://jsfiddle.net/esoyke/7wddxks5/

Ответ 7

Добавить диапазон для каждой или группы слов, которые вы хотите выровнять влево или вправо. затем добавьте id или class на span, например:

<h3>
<span id = "makeLeft"> Left Text</span>
<span id = "makeRight"> Right Text</span>
</h3>

CSS -

#makeLeft{
float: left;
}

#makeRight{
float: right;
}

Ответ 8

Если вы просто хотите изменить выравнивание текста, просто создайте классы

.left {
text-align: left;
}

и пропустите этот класс через текст

<span class='left'>aligned left</span>