Html 如何将文本与其他文本水平对齐?
我正在编写一些html代码,想知道如何对齐一些文本,使文本与页面左侧的其他文本具有相同的缩进 这是我的密码:Html 如何将文本与其他文本水平对齐?,html,css,text,tags,alignment,Html,Css,Text,Tags,Alignment,我正在编写一些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:/
<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中的代码以及类:
<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>
在上面的代码中,一些图标的宽度与其他图标不同。因此,代码行的文本与页面左侧的对齐距离不同
我该怎么做?我是在找span课程还是别的什么
提前感谢。试试这个:
<style type="text/css">
i{width: 30px;}
</style>
试试这个:
.fa{
float: left;
}
.fa + span{
margin-left: 30px; /* equal or greater than the highest width image */
}
fa{width:25px;text align:center;}怎么样?