css 文字对齐

移动端，这种换行对齐怎么写比较简单？

有人建议用table，出来是这样的。左边和右边是居中对齐而不是顶部对齐

左边定义一个标签，右边定义一个标签就可以啦(此处用了bootstrap)

<style>
 span{
    width:20%;
 }
p{
  width:80%
}
</style>
<div class="clearfix">
   <span class="pull-left">有大维修</span>
   <p class="pull-left"> XXXXX </p>
</div>

<!DOCTYPE HTML>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <title>demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
</head>

<body>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .dl {
            color: #999;
            line-height: 24px;
            font-size: 14px;
            overflow: hidden;
        }
        
        .dt {
            float: left;
        }
        
        .dd {
            margin-left: 5em;
        }
    </style>

    <div class="dl">
        <span class="dt">有大维修：</span>
        <p class="dd">更换过非原装屏，维修过主板或主要部件</p>
    </div>
    <div class="dl">
        <span class="dt">有小维修：</span>
        <p class="dd">更换原装屏，维修过开关键、音量键、耳机孔、充电口等小部件，拧过螺丝</p>
    </div>
</body>

</html>

更新效果图：

用<table>
修改：td里加valign="top"
<tr>

<td>1:</td>
<td>2</td>

</tr>
<tr>

<td valign="top">3:</td>//顶部对齐
<td>4</td>

</tr>

但是，要设有宽度

【热门文章】