我如何在同一行中将文本左对齐，将文本向右对齐

如何对齐文本，以便在同一行中使其中一些文本向左对齐，其中一些向右对齐？

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

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

HTML 文件：

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

CSS 文件：

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

你完成了....

虽然这里的几个解决方案可以工作，但没有一个可以很好地处理重叠并最终将一个项目移动到另一个项目下方。如果您尝试对将动态绑定的数据进行布局，则直到运行时才会知道它看起来很糟糕。

我喜欢做的是简单地创建一个单行表并在第二个单元格上应用右浮点数。无需在第一个应用左对齐，这是默认发生的。此句柄通过自动换行完美重叠。

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

<h1> left <span> right </span></h1>

.css：

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

在要左对齐或右对齐的每个或一组单词上添加范围。然后在跨度上添加 id 或类，例如：

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

.CSS-

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

一个例子，只是为了展示Benjamin Udink ten Cate在上面的答案中解决方案的丰富性："使用css flex布局和justify-content的答案">

使用此 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>

这就是我做引脚排列的方式。

如果您使用的是 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>

相关内容

最新更新

热门标签：