如何将文本与其他文本水平对齐？

Question

我正在编写一些 html 代码，想知道如何对齐一些文本，使文本与页面左侧的其他文本具有相同的缩进。

这是我的代码：

<p><i class="fa fa-phone"></i><span style=""> Phone : 0800 000 000</span></p>
<p><i class="fa fa-home"></i><span style=""> Web : http://www.example.com</span></p>
<p><i class="fa fa-map-marker"></i><span style=""> Map : example map address</span></p>
<p><i class="fa fa-envelope"></i><span style=""> Email : example@address.com</span></p>

这是 html 中的代码，其中 class 是：

    <div class="box1">
        <div class="box box-default">
          <div class="box-header with-border">
            <h3 class="box-title">Collapsable</h3>
            <div class="box-tools pull-right">
              <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
            </div><!-- /.box-tools -->
          </div><!-- /.box-header -->
          <div class="box-body">
            <p><i class="fa fa-phone"></i><span style=""> Phone : 0800 000 000</span></p>
            <p><i class="fa fa-home"></i><span style=""> Web : http://www.example.com</span></p>
            <p><i class="fa fa-map-marker"></i><span style=""> Map : example map address</span></p>
            <p><i class="fa fa-envelope"></i><span style=""> Email : example@address.com</span></p>
          </div><!-- /.box-body -->
        </div><!-- /.box -->
    </div>

在上面的代码中，一些图标的宽度与其他图标的宽度不同。因此，代码行的文本与页面左侧的对齐距离不同。

我该怎么做？我是在寻找跨度 class 还是其他东西？

提前致谢。

Answer 1

试试这个：

<style type="text/css">
    i{width: 30px;}
</style>

Answer 2

试试这个：

.fa{
     float: left;
}

.fa + span{
     margin-left: 30px; /* equal or greater than the highest width image */
}

如何将文本与其他文本水平对齐？

How do I align text horizontally with other text?

html

css

tags

text

alignment