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

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

---

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

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

---

While several of the solutions here will work, none handle overlap well and end up moving one item to below the other. If you are trying to layout data that will be dynamically bound you won't know until runtime that it looks bad.

What I like to do is simply create a single row table and apply the right float on the second cell. No need to apply a left-align on the first, that happens by default. This handles overlap perfectly by word-wrapping.

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/

---

Add span on each or group of words you want to align left or right. then add id or class on the span such as:

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

CSS-

#makeLeft{
float: left;
}

#makeRight{
float: right;
}

---

If you just want to change alignment of text just make a classes

.left {
text-align: left;
}

and span that class through the text

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

참고URL : https://stackoverflow.com/questions/12438339/how-may-i-align-text-to-the-left-and-text-to-the-right-in-the-same-line