右にテキストを左に並べるにはどうすればいいですか？

Question

私は、左側のアイコンを右側のテキストに正しく合わせようとしています。

.firm-info { 
 
    width: 280px; 
 
} 
 
.firm-info ul { 
 
    margin-left: -15px; 
 
} 
 
.firm-info ul li { 
 
    text-decoration: none; 
 
    list-style-type: none; 
 
    margin-bottom: 35px; 
 
    font-size: 20px; 
 
    display: flex; 
 
} 
 
.firm-info ul li i { 
 
    float: left; 
 
    font-size: 20px; 
 
    width: 10px; 
 
} 
 
.firm-info p { 
 
    float: left; 
 
    max-width: 200px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"> 
 

 
<div class="firm-info"> 
 
    <ul> 
 
    <li> 
 
     <i class="fa fa-info-circle"></i> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas venenatis cursus nulla, tempus porttitor ex fringilla id. Donec cras amet. 
 
     </p> 
 
    </li> 
 
    <li> 
 
     <i class="fa fa-clock-o"></i> 
 
    </li> 
 
    <li> 
 
     <i class="fa fa-building"></i> 
 
    </li> 
 
    </ul> 
 
</div>

現時点では、次のようになります。

最終版は、次のようになります。

Answer 1

pタグのデフォルトの上マージンをリセットし、iタグの幅を増やすか、単に幅を取り除き、間隔のために正しいパディングまたはマージンを使用するだけです。

jsFiddle

.firm-info { 
 
    width: 280px; 
 
} 
 
.firm-info ul { 
 
    margin-left: -15px; 
 
} 
 
.firm-info ul li { 
 
    list-style-type: none; 
 
    margin-bottom: 35px; 
 
    font-size: 20px; 
 
    display: flex; 
 
} 
 
.firm-info ul li i { 
 
    margin-right: 10px; 
 
} 
 
.firm-info ul li p { 
 
    margin: 0; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"> 
 

 
<div class="firm-info"> 
 
    <ul> 
 
    <li> 
 
     <i class="fa fa-info-circle"></i> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas venenatis cursus nulla, tempus porttitor.</p> 
 
    </li> 
 
    <li> 
 
     <i class="fa fa-clock-o"></i> 
 
     <p>Bla</p> 
 
    </li> 
 
    <li> 
 
     <i class="fa fa-building"></i> 
 
     <p>Bla</p> 
 
    </li> 
 
    </ul> 
 
</div>