Як я можу вирівняти текст ліворуч і текст праворуч у тому ж рядку?

Як я можу вирівняти текст так, щоб частина його вирівнювалася ліворуч, а частина вирівнювалась праворуч у тому ж рядку?

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

Як я можу вирівняти відповідний текст ліворуч та праворуч, зберігаючи його в одному рядку?

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

https://jsfiddle.net/gionaf/5z3ec48r/

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

Якщо ви не хочете використовувати плаваючі елементи і хочете переконатися, що обидва блоки не перекриваються, спробуйте:

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

ФАЙЛ HTML:

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

CSS FILE:

.left
{
  float: left;
}

.right
{
  float: right;
}

і ви закінчили….

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

css:

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

Хоча декілька рішень тут працюватимуть, жодне рукоятка не накладається добре і в кінцевому підсумку пересуває один елемент нижче іншого. Якщо ви намагаєтеся розмістити дані, які будуть динамічно пов'язані, ви не знатимете до часу виконання, що це виглядає погано.

Мені подобається просто створити таблицю з одним рядком і застосувати правильний поплавок на другій комірці. Не потрібно застосовувати вирівнювання зліва на першому, що відбувається за замовчуванням. Ця ручка ідеально перекривається за допомогою переносу слів.

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/

Додайте інтервал до кожного або групи слів, які потрібно вирівняти ліворуч або праворуч. потім додайте ідентифікатор або клас на проміжок, наприклад:

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

CSS-

#makeLeft{
float: left;
}

#makeRight{
float: right;
}

Якщо ви використовуєте Bootstrap, спробуйте це:

<div class="row">
    <div class="col" style="text-align:left">left align</div>
    <div class="col" style="text-align:right">right align</div>
</div>

Якщо ви просто хочете змінити вирівнювання тексту, просто створіть заняття

.left {
text-align: left;
}

і поширити цей клас на текст

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