Angular Material: 如何在不设置固定宽度或不使用 Javascript 的情况下将 span 的宽度设置为相同？

Question

我有 3 个容器，其中包含一个输入和一个跨度。跨度宽度可以动态变化，因为我将添加本地化，所以我不知道文本的最大宽度。因此，有没有一种方法可以在不设置固定宽度或使用 Javascript 的情况下将所有跨度设置为相同的宽度？最好使用 Angular Material.

参见此处示例：http://codepen.io/cmacdonnacha/pen/PzWWda

<body ng-app="myApp" ng-controller="AppCtrl">
  <div layout="column">
    <md-input-container md-no-float layout="row">
      <span>From:</span>
      <input type="email">
    </md-input-container>

    <md-input-container md-no-float layout="row">
      <span>To:</span>
      <input type="email">
    </md-input-container>

    <md-input-container md-no-float layout="row">
      <span>Cc:</span>
      <input type="email">
    </md-input-container>
  </div>
</body>

谢谢！

Answer 1

尝试为每个 md-input-container 使用 div 元素，并将 span 与 flex 属性一起使用。这是相关代码。

<div layout="column">
<div layout="row" flex layout-align="start center">
  <span flex="initial">From:</span>
  <md-input-container flex>
    <input type="from">
  </md-input-container>
</div>
<div layout="row" flex layout-align="start center">
  <span flex="initial">To:</span>
  <md-input-container flex>
    <input type="email">
  </md-input-container>
</div>
<div layout="row" flex layout-align="start center">
  <span flex="initial">Subject:</span>
  <md-input-container flex>
    <input type="subject">
  </md-input-container>
</div>

您可以根据需要定义值flex以获得所需的结果。这是工作代码。 http://codepen.io/next1/pen/yJgKBR

编辑：因为您将使用 inital 作为 flex 值，span 元素将仅使用它所要求的 space 但您将以这种方式失去对齐。

Angular Material: 如何在不设置固定宽度或不使用 Javascript 的情况下将 span 的宽度设置为相同？

Angular Material: How can I set the width of spans to be the same without setting a fixed width or using Javascript?

angular-material