如何让输入列表中两类元素垂直对齐且不随内容偏移？

在校园项目Web应用中，添加到列表的食物名称与日期元素无法上下对齐——当食物字段内容长度不同时，日期字段会发生偏移。当前效果如下：

该问题已困扰两周，尝试过float: left方法，但不确定是否正确。

JavaScript #

function addFoodsAndDate(event) {
  foodsdate.innerHTML += `
                <li class="mdl-list__item">
                  <span class="mdl-list__item-primary-content">
                      ${foodsfield.value}
                  </span>
                  <span class="mdl-list__item-primary-content">
                      ${datefield.value}
                  </span>
                </li>
                    `;

  foodsfield.value += ``;
  datefield.value += ``;

  return false;
}

CSS #

.demo-list-item {
  width: 320px;
}

.page-content {
  padding: 20px 100px;
  float: left
}

body {
  background: #3d3d3d
}

HTML #

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Kühlflex Web-App</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation. We hide it in small screens. -->
    </div>
  </header>
  <main class="mdl-layout__content">
    <div class="page-content">
      <!-- Your content goes here -->

      <form onsubmit="return addFoodsAndDate()">
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
          <input class="mdl-textfield__input" type="text" id="foodsfield">
          <label class="mdl-textfield__label" for="foodsfield">Deine Lebensmittel...</label>
        </div>

        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
          <input class="mdl-textfield__input" type="text" pattern="-?[0-9+.]*([0-9+.]+)?" id="datefield">
          <label class="mdl-textfield__label" for="datefields">Datum...</label>
          <span class="mdl-textfield__error">Datum eingeben!</span>
        </div>

        <button type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
                              Hinzufügen
                            </button>
      </form>

      <ul class="demo-list-icon mdl-list" id="foodsdate">

      </ul>

    </div>
  </main>
</div>

方法1：Flex布局快速实现对齐 #

给列表项添加Flex布局，让日期始终靠右对齐，不受食物内容长度影响：

1. 修改CSS，添加：

.mdl-list__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

2. 修正JS中清空输入框的错误（原代码+= ''无法清空）：

function addFoodsAndDate(event) {
  foodsdate.innerHTML += `
                <li class="mdl-list__item">
                  <span class="mdl-list__item-primary-content">
                      ${foodsfield.value}
                  </span>
                  <span class="mdl-list__item-primary-content">
                      ${datefield.value}
                  </span>
                </li>
                    `;

  // 正确清空输入框
  foodsfield.value = "";
  datefield.value = "";

  return false;
}

方法2：固定宽度控制（更精准） #

如果需要给日期区域固定宽度，可给日期的span单独加类：

1. 修改JS模板，给日期span添加date-item类：

function addFoodsAndDate(event) {
  foodsdate.innerHTML += `
                <li class="mdl-list__item">
                  <span class="mdl-list__item-primary-content">
                      ${foodsfield.value}
                  </span>
                  <span class="mdl-list__item-primary-content date-item">
                      ${datefield.value}
                  </span>
                </li>
                    `;

  foodsfield.value = "";
  datefield.value = "";

  return false;
}

2. 添加CSS样式：

.mdl-list__item {
  display: flex;
  align-items: center;
}
.date-item {
  width: 120px; /* 按需调整宽度 */
  text-align: right;
  margin-left: auto;
}

方法3：利用MDL网格系统（贴合框架设计） #

用MDL自带的网格布局划分区域，适配框架风格：

修改JS中的列表项模板：

function addFoodsAndDate(event) {
  foodsdate.innerHTML += `
                <li class="mdl-list__item">
                  <div class="mdl-grid">
                    <div class="mdl-cell mdl-cell--8-col">
                      ${foodsfield.value}
                    </div>
                    <div class="mdl-cell mdl-cell--4-col">
                      ${datefield.value}
                    </div>
                  </div>
                </li>
                    `;

  foodsfield.value = "";
  datefield.value = "";

  return false;
}

内容的提问来源于stack exchange，提问作者ago