在水平ul中将一个li对齐另一个li

Question

我正在尝试实现以下布局：

我现在的目标是：

如何在li.company

下获得li.name

我已经尝试float左边的公司li并将其作为最后一个li但是没有工作继续保持同一条线。任何帮助将不胜感激。

这是我的代码：

＆＃13;

＆＃13;

#flip {
  padding: 5px;
  background-color: #4d4d4f;
  border: solid 1px #c3c3c3;
  width: 33vw;
}
.contact-widget-list,
.sender-info {
  list-style: none;
  display: inline;
  margin: 0;
  padding: 0;
}
.sender-info {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 30%;
}
.clearfix::after {
  clear: both;
}
.sender-info li {
  display: inline-block;
  margin: 5px;
  padding-bottom: 5px;
  margin-bottom: 5px;
}
.email-icon,
.calander-icon,
.dropdown-icon {
  float: right;
}

＆＃13;

<div id="flip">
  <ul class="sender-info">
    <li class="name">Name 123123</li>
    <li class="company">Company 123123</li>
    <li class="dropdown-icon"><i class="fa fa-arrow-circle-o-down" aria-hidden="true"></i>
    </li>
    <li class="calander-icon"><i class="fa fa-calendar" aria-hidden="true"></i>
    </li>
    <li class="email-icon"><i class="fa fa-envelope" aria-hidden="true"></i>
    </li>
    <li class="clearfix"></li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需更改HTML的顺序即可。首先在HTML和其他项目中放置图标。

<强> HTML：

<div id="flip">
  <ul class="sender-info">

    <!-- Following icons should come first in HTML -->
    <li class="dropdown-icon"><i class="fa fa-arrow-circle-o-down" aria-hidden="true"></i>
    </li>
    <li class="calander-icon"><i class="fa fa-calendar" aria-hidden="true"></i>
    </li>
    <li class="email-icon"><i class="fa fa-envelope" aria-hidden="true"></i>
    </li>

    <!-- Place following code after icons in HTML -->
    <li class="name">Name 123123</li>
    <li class="company">Company 123123</li>
  </ul>
</div>

并添加以下css：

.sender-info .name,
.sender-info .company {
  background: white;
  overflow: hidden;
  width: 200px;
}

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

#flip {
  padding: 5px;
  background-color: #4d4d4f;
  border: solid 1px #c3c3c3;
}
.contact-widget-list,
.sender-info {
  list-style: none;
  display: inline;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.sender-info {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 30%;
}
.sender-info li {
  margin: 5px;
  padding-bottom: 5px;
}

.sender-info .name,
.sender-info .company {
  background: white;
  overflow: hidden;
  width: 200px;
}
.email-icon,
.calander-icon,
.dropdown-icon {
  float: right;
}

<div id="flip">
  <ul class="sender-info">
    <li class="dropdown-icon"><i class="fa fa-arrow-circle-o-down" aria-hidden="true"></i>
    </li>
    <li class="calander-icon"><i class="fa fa-calendar" aria-hidden="true"></i>
    </li>
    <li class="email-icon"><i class="fa fa-envelope" aria-hidden="true"></i>
    </li>
    <li class="name">Name 123123</li>
    <li class="company">Company 123123</li>
  </ul>
</div>