如何将此点与文本的基线垂直对齐？

Question

我应用了材料设计。目标是创建两个文本域，中间有一个点。问题是点在底部没有垂直对齐，而是在中心的某处。如何在底部垂直对齐点？

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div layout="row">
  <md-input-container>
    <label>Amount Paid</label>
    <input ng-model="vm.amount1" ng-change="vm.amountChange()" required md-no-float="true" md-maxlength="6" type="text" name="amount">
  </md-input-container>

  <md-text-float>
    <label>.</label>

  </md-text-float>

  <md-input-container>
    <label>Cents</label>
    <input ng-model="vm.amount2" ng-change="vm.amountChange()" required md-no-float="true" md-maxlength="2" type="text" name="amount">
  </md-input-container>
</div>

＆＃13;

＆＃13;

＆＃13;

如何让第二个文本框变小（这样只显示2个字符）？

Answer 1

  

如何让第二个文本框变小（这样只显示2个字符）？

添加width属性：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div layout="row">
  <md-input-container>
    <label>Amount Paid</label>
    <input ng-model="vm.amount1" ng-change="vm.amountChange()" required md-no-float="true" md-maxlength="6" type="text" name="amount">
  </md-input-container>

  <md-text-float>
    <label>.</label>

  </md-text-float>

  <md-input-container>
    <label>Cents</label>
    <input style='width:30px' ng-model="vm.amount2" ng-change="vm.amountChange()" required md-no-float="true" md-maxlength="2" type="text" name="amount">
  </md-input-container>
</div>

Answer 2

第一个div：<div layout="row" layout-align="none end">

这是使用材料设计对齐项目的方法。首先是水平和第二垂直对齐。如果layout="column"，则会切换它们。

有关更多对齐选项，请使用官方文档，这很容易理解：https://material.angularjs.org/latest/layout/alignment

但它也不会将点放在你想要的位置。你必须设置标签的样式（你不应该使用标签，它不是任何标签）。