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

尝试对每个div使用md-input-container元素，并将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元素将仅使用其所需的空间，但您将以这种方式失去对齐。

角度材质：如何在不设置固定宽度或使用Javascript的情况下将跨距宽度设置为相同？

1 个答案: