我该如何将文字左alignment,文字右alignment?

如何alignment文本,使其中的一部分与左边alignment,而其中的一部分与同一行内的右边alignment?

<p>This text should be left-aligned. This text should be right aligned.</p> 

我可以将所有文本alignment到左侧(或右侧),直接内联,或使用样式表 –

 <p style='text-align: left'>This text should be left-aligned. This text should be right aligned.</p> 

如何将相应的文本左右alignment,同时保持同一行?

8 Solutions collect form web for “我该如何将文字左alignment,文字右alignment?”

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

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

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

HTML文件:

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

CSS文件:

 .left { float: left; } .right { float: right; } 

你完成了….

虽然这里的几个解决scheme将起作用,但是没有一个处理重叠得很好,最终将一个项目移到另一个项目的下面。 如果你正在尝试布局将被dynamic绑定的数据,那么直到运行时才会知道它看起来很糟糕。

我喜欢做的只是创build一个单行表,并在第二个单元格上应用正确的浮动。 第一个不需要应用左alignment,这是默认情况下发生的。 这通过文字包装完美地处理重叠。

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/

在你想要左右alignment的每个单词或一组单词上添加span。 然后在span上添加id或class,例如:

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

CSS-

 #makeLeft{ float: left; } #makeRight{ float: right; } 

如果你只是想改变文本的alignment方式,只需创build一个类

 .left { text-align: left; } 

并通过文本跨越该类

 <span class='left'>aligned left</span> 
  • 从垃圾邮件机器人隐藏电子邮件的有效方法
  • 浏览器cachingCSS文件
  • 隐藏iframe上的水平滚动条?
  • 如何在Handlebar模板中使用注释?
  • 除了一边创build一个CSS3盒子阴影
  • alignment文本和select框在CSS中相同的宽度?
  • 用CSS3生成重复的六angular形图案
  • 如何在不包装的情况下在引导列之间添加余量
  • 是否有可能从JavaScript访问SQLite数据库?
  • 如何在A4纸页面中制作HTML页面?
  • 删除HTML或ASPX扩展