같은 줄에서 텍스트를 왼쪽에 정렬하고 오른쪽에 텍스트를 정렬하려면 어떻게해야합니까?

텍스트 중 일부는 왼쪽에 정렬되고 일부는 오른쪽에 정렬되도록 텍스트를 정렬하려면 어떻게해야합니까?

<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 파일 :

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

왼쪽 또는 오른쪽으로 정렬하려는 각 단어 또는 그룹에 범위를 추가합니다. 그런 다음 다음과 같은 범위에 ID 또는 클래스를 추가하십시오.

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