如何使该点与文本的基线垂直对齐？

Question

I applied material design. The goal is to create two textfields with a dot in between. The problem is that the dot is not aligned vertically at the bottom, but somewhere in the center. How can I get the dot vertical aligned at the bottom?

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

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

Answer 1

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

adding width property:

 <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

First div: <div layout="row" layout-align="none end">

This is how you align items using material design. First is horizontal and second vertical alignment. They are switched if layout="column" .

For more alignment options use the official documentation, it is easy to understand: https://material.angularjs.org/latest/layout/alignment

But it will not position the dot where you want it either. You have to style the label (you should not use label by the way, it is not label of anything).