124

同じ行内でテキストの一部が左に整列し、一部が右に整列するようにテキストを整列するにはどうすればよいですか？

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

同じ行に維持しながら、対応するテキストを左右に揃えるにはどうすればよいですか？

4

10 に答える 10

216 

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

于 2012-09-15T14:50:37.070 に答える
42

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

于 2012-09-15T14:53:11.980 に答える
22

フローティング要素を使用せず、両方のブロックが重ならないようにしたい場合は、次を試してください。

<p style="text-align: left; width:49%; display: inline-block;">LEFT</p>
<p style="text-align: right; width:50%;  display: inline-block;">RIGHT</p>
于 2015-10-05T10:58:09.740 に答える
9

HTML ファイル:

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

CSS ファイル:

.left
{
  float: left;
}

.right
{
  float: right;
}

そして、あなたは終わった....

于 2012-09-15T15:05:45.793 に答える
8

ここでの解決策のいくつかは機能しますが、適切にオーバーラップするハンドルはなく、1 つのアイテムを別のアイテムの下に移動することになります。動的にバインドされるデータをレイアウトしようとしている場合、実行時まで見た目が悪いことはわかりません。

私がやりたいことは、単純に単一の行テーブルを作成し、2 番目のセルに適切なフロートを適用することです。最初に左揃えを適用する必要はありません。これはデフォルトで行われます。これは、ワードラップによってオーバーラップを完全に処理します。

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/

于 2016-02-16T19:06:53.203 に答える
7 
<h1> left <span> right </span></h1>

css：

h1{text-align:left; width:400px; text-decoration:underline;}
span{float:right; text-decoration:underline;}
于 2012-09-15T16:08:23.253 に答える
3

左または右に揃えたい単語のそれぞれまたはグループにスパンを追加します。次に、次のようにスパンに id またはクラスを追加します。

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

CSS-

#makeLeft{
float: left;
}

#makeRight{
float: right;
}
于 2016-11-06T21:04:12.657 に答える
0

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>
于 2020-03-19T19:23:13.377 に答える
-1

テキストの配置を変更したいだけの場合は、クラスを作成するだけです

.left {
text-align: left;
}

そのクラスをテキスト全体に広げます

<span class='left'>aligned left</span>
于 2012-09-15T15:42:09.407 に答える