html - 在水平 ul 中将一个 li 对齐到另一个 li 下面

Question

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

我现在的情况是:

如何在 li.name 下获取 li.company？

我曾尝试将公司 li float 并使其成为最后一个 li，但这不起作用，因此一直转到同一行。任何帮助将不胜感激。

这是我的代码:

#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;
}

<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>

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>