Question

您好，有一种简单的方法可以在span内部对齐文本吗？我找到了几个解决方案，但似乎没有什么对我有用。这是我的代码：

 <?php echo Yii::t('default','Tax Amount').': ';?>
          <span style="border-bottom: 1px solid; ">
            <?php echo Yii::app()->locale->numberFormatter->formatCurrency($taxamount, 'EUR');?>
        </span>
    </span>

我想要的只是将$taxamount与右边对齐，并将税额按原样保留在左边。起初我觉得这很容易，但没有任何作用！我也用div尝试过它并且它起作用但它与我下面的任何东西混淆了。我在代码下面还有三个回声。我对CSS不是很熟练，我很感激任何帮助。我的完整代码是这样的：

<?php echo Yii::t('default','Amount').': ';?>
    <span style="border-bottom: 1px solid;">
        <?php echo Yii::app()->locale->numberFormatter->formatCurrency($model->credit, 'EUR');?>
    </span>
<br>

        <?php echo Yii::t('default','Tax').': 23%';?>
<br>
<?php echo Yii::t('default','Tax Amount').': ';?>
      <span style="border-bottom: 1px solid; ">
        <?php echo Yii::app()->locale->numberFormatter->formatCurrency($taxamount, 'EUR');?>
    </span>
</span>
    <br>
<?php echo Yii::t('default','Total').': ';?>
    <span style="border-bottom: 1px solid;">
        <?php echo Yii::app()->locale->numberFormatter->formatCurrency($total, 'EUR');?>
    </span>

我评论了所有内容，我只使用了以下建议的解决方案。所以我的代码现在是这样的：

p>span {
display: inline-block;
width: 50%;
}
p>span:last-child {
  text-align: right;
}
.pull-left {
    float: left;
}

.pull-right {
    float: right;
}
<p><span>Tax Amount</span><span>EUR 12.50</span></p>

我在Yii中使用mpdf扩展名以pdf格式打印结果。所以现在这是我的所有代码加上mpdf扩展名。但仍然没有任何反应！

Answer 1

<span>是内联元素，文本对齐将起作用，但是您需要为元素赋予宽度（它不会起作用，而它是内联元素）。< / p>

有几种方法可以做到，一种方法是将它们显示为段落中的内联块：

＆＃13;

p>span {
  display: inline-block;
  width: 50%;
}
p>span:last-child {
  text-align: right;
}

＆＃13;

<p><span>Tax Amount</span><span>EUR 12.50</span></p>

＆＃13;

另一种方法是浮动它们:(但我个人更喜欢第一种方法）

＆＃13;

p>span {
  display: block;
  float: left;
  width: 50%;
}
p>span:last-child {
  text-align: right;
  float: right;
}

＆＃13;

<p><span>Tax Amount</span><span>EUR 12.50</span></p>

＆＃13;

Answer 2

如果您的左对齐文字位于其他元素内（例如下面的<div>），您应该可以将'float:right' CSS样式添加到<span>。

<div>
     Left-hand text <span style="float:right">Right-hand text</span>
</div>

float通常用于图片，但可以与span标签一起使用。它的工作方式是将<span>标记字面悬浮在包含元素的右边缘。

这可以为您提供所需的行为，但您也可以查看此question。看起来他们正试图完成类似的事情。

文字对齐范围

2 个答案: