html - 我怎样才能使这个点与文本的基线垂直对齐？

Question

我应用了 Material 设计。目标是创建两个文本字段，中间有一个点。问题是点不是在底部垂直对齐，而是在中心某处。如何让点在底部垂直对齐？

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

我怎样才能让第二个文本框变小(这样它只显示 2 个字符)？

Answer 1

how can I get the second textbox smaller (such that it only displays 2 characters)?

添加宽度属性:

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