时间戳

首页 > 解决方案 > CSS：在图标右侧对齐文本

javascript - CSS：在图标右侧对齐文本

问题描述

这是我的代码，我怎么能在左边有图标，所有内容都在右边，我不希望内容低于图标。像这样的东西 在此处输入图像描述

.column {
  float: left;
  width: 50%;
  padding: 10px 0px;
  height: 120px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="MED column">
  <i class="fa fa-user-o"></i>
  <span style="text-decoration: underline;"><b>Medical Bill reimbursemenet employee</b></span>
  <div><span id="MED"></span><span> per biweekly paycheck</span></div>
  <div class="subscript">The vision plan lets you save contacts.
  </div>
</div>
<div class="ADD column">
  <i class="fa fa-envelope-o"></i>
  <span style="text-decoration: underline;"><b>Accidental Death and Dismemberment of employee </b></span>
  <div><span id="ADD"></span><span> per biweekly paycheck</span></div>
  <div class="subscript">You and your family be enrolled.
  </div>
</div>

标签： javascripthtmlcss

解决方案

.column {
display: flex;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="MED column">
  <i class="fa fa-user-o"></i>
  <div>
    <span style="text-decoration: underline;"><b>Medical Bill reimbursemenet employee</b></span>
    <div><span id="MED"></span><span> per biweekly paycheck</span></div>
    <div class="subscript">The vision plan lets you save contacts.</div>
  </div>
</div>
<div class="ADD column">
  <i class="fa fa-envelope-o"></i>
  <div>
  <span style="text-decoration: underline;"><b>Accidental Death and Dismemberment of employee </b></span>
  <div><span id="ADD"></span><span> per biweekly paycheck</span></div>
  <div class="subscript">You and your family be enrolled.</div>
  </div>
</div>

推荐阅读