如何在同一行中将文本向左对齐和向右对齐？

如何对齐文本，使其中一些对齐左边，另一些对齐右边的同一行？

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

我如何对齐相应的文本向左和向右，同时保持在同一行？

285412 次浏览
小开
最佳答案 

<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

小开

HTML 文件:

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

CSS 文件:

.left
{
float: left;
}


.right
{
float: right;
}

你就完了。

小开

如果你只是想改变文本的对齐方式，只需要创建一个类

.left {
text-align: left;
}

在课文中跨越这个类

<span class='left'>aligned left</span>
小开 
<h1> left <span> right </span></h1>

Css:

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

如果您不想使用浮动元素，并希望确保两个块不重叠，请尝试:

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

虽然这里的几个解决方案将工作，没有一个处理好重叠，并最终移动一个项目到下面的其他。如果您试图布局将被动态绑定的数据，那么直到运行时您才会知道它看起来很糟糕。

我喜欢做的只是创建一个单独的行表，然后在第二个单元格上应用正确的浮点数。不需要在第一个上应用左对齐，默认情况下会发生这种情况。这个句柄通过文字包装完全重叠。

超文本标示语言

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

一个使用 css flex 布局和调整内容的答案

p {
display: flex;
justify-content: space-between;
}
<p>
<span>This text is left aligned</span>
<span>This text is right aligned</span>
</p>

小开

举个例子，只是为了展示来自 Benjamin Udink ten Cate 在 上面的回答中的解决方案的丰富性: “一个使用 css flex 布局和调整内容的答案”

使用 CSS: 


p {
display: flex;
justify-content: space-between;
}
#connettore{
overflow: hidden;
margin: 0px 20px 10px 180px;
width: 250px;
align:left;
}


ol#connettore {
counter-reset: pin 6; /* Initiate a counter */
list-style: none; /* Remove default numbering */
/*list-style: decimal; /* Keep using default numbering for IE6/7 */
font: 15px 'trebuchet MS', 'lucida sans';
padding: 0;
margin-bottom: 4em;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
ol ol {
margin: 0 0 0 2em; /* Add some left margin for inner lists 20px*/
}


/*=========== Rectangle-shaped numbers ===========*/
    

.rectangle-list a{
position: relative;
display: block;
padding: .1em .2em .1em .8em;
margin: .5em 0 .5em 2.5em;
background: #ddd;
color: #444;
text-decoration: none;
transition: all .3s ease-out;
line-height: .1px;
    

}
.rectangle-list a:hover{
background: #eee;
}
.rectangle-list a:before{
content: counter(pin);
counter-increment: pin -1;
position: absolute;
left: -2.5em;
top: 50%;
margin-top: -1em;
background: #fa8072;
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
}
.rectangle-list a:after{
position: absolute;
content: '';
border: .5em solid transparent;
left: -1em;
top: 50%;
margin-top: -.5em;
transition: all .3s ease-out;
}
.rectangle-list a:hover:after{
left: -.5em;
border-left-color: #fa8072;
}
<ol id="connettore" class="rectangle-list" >
<li><a href=""><p><span>BLU</span> <span>(SWDIO)</span></p> </a> </li>
<li><a href=""><p><span> MARRONE</span> <span>(SWDCLK)</span></p> </a></li>
<li><a href=""><p><span>GIALLO</span> <span>(RESET)</span></p> </a></li>
<li><a href=""><p><span>NERO</span> <span>(GND)</span></p> </a></li>
<li><a href=""><p><span>BIANCO</span> <span>(VCC)</span></p> </a> </li>


</ol>

这就是我做拼图的方法。 : -)


提交答案