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

【问题标题】：How can I vertically align this dot with my text's base line?如何将此点与文本的基线垂直对齐？
【发布时间】：2015-05-13 09:07:15
【问题描述】：

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

<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 个字符）？

【问题讨论】：

你的 CSS 在哪里？请将其包含在您的问题中。
看起来他在使用Angular Material
一个 codepen 可以帮助解决这个问题。
Material Design 你的意思是materializecss？

标签： html css material-design

【解决方案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>

【讨论】：

【解决方案2】：

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

这是您使用材料设计对齐项目的方式。第一个是水平对齐，第二个是垂直对齐。如果layout="column"，它们会被切换。

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

但它也不会将点定位在您想要的位置。您必须设置标签的样式（顺便说一下，您不应该使用标签，它不是任何东西的标签）。

【讨论】：