Question

在看了很多代码库材料设计表单之后，我发现他们的基本HTML结构是

＆＃xA;＆＃xA;

 ＆lt; form＆gt;＆＃xA; ＆lt; div class =“form-group”＆gt;＆＃xA; ＆lt; input type =“text”＆gt;＆lt; span class =“bar”＆gt;＆lt; / span＆gt;＆＃xA; ＆LT;标签＆gt;名称和LT; /标签＆gt;＆＃XA; ＆LT; / DIV＆GT;＆＃XA; ＆lt; div class =“form-group”＆gt;＆＃xA; ＆lt; input type =“email”＆gt;＆lt; span class =“bar”＆gt;＆lt; / span＆gt;＆＃xA; ＆LT;标签＆gt;电子邮件与LT; /标签＆gt;＆＃XA; ＆LT; / DIV＆GT;＆＃XA; ＆lt; button type =“button”class =“button buttonBlue”＆gt; Subscribe＆＃xA; ＆lt; div class =“ripples buttonRipples”＆gt;＆lt; span class =“ripplesCircle”＆gt;＆lt; / span＆gt;＆lt; / div＆gt;＆＃xA; ＆LT; /按钮＆GT;＆＃XA;＆LT; /形式＆GT;＆＃XA;＆LT峰; br＆GT;＆＃XA;

＆＃XA;＆＃XA;   <一个href =“http://codepen.io/Akashlal/pen/yOjBWV”rel =“nofollow”> Codepen示例  
＆＃xA;＆＃xA; 简而言之，＆lt; input＆gt; 始终位于＆lt; label＆gt;  
＆＃xA;＆＃xA;   CSS 我需要修改，以确保输出保持不变，当＆lt; label＆gt; 高于＆lt; input＆gt; ？
＆ #xA;

Answer 1

如果您正在使用材料设计，则无需编写自定义CSS，他们已经为此提供了演示。

有关解决方案，请参阅以下链接https://material.angularjs.org/latest/demo/input

以下是示例代码

<form name="userForm">
        <div layout-gt-xs="row">
          <md-input-container class="md-block" flex-gt-xs>
            <label>Company (Disabled)</label>
            <input ng-model="user.company" disabled>
          </md-input-container>
          <md-datepicker ng-model="user.submissionDate" md-placeholder="Enter date">
          </md-datepicker>
        </div>
        <div layout-gt-sm="row">
          <md-input-container class="md-block" flex-gt-sm>
            <label>First name</label>
            <input ng-model="user.firstName">
          </md-input-container>
          <md-input-container class="md-block" flex-gt-sm>
            <label>Long Last Name That Will Be Truncated And 3 Dots (Ellipsis) Will Appear At The End</label>
            <input ng-model="theMax">
          </md-input-container>
        </div>
        <md-input-container class="md-block">
          <label>Address</label>
          <input ng-model="user.address">
        </md-input-container>
        <md-input-container md-no-float class="md-block">
          <input ng-model="user.address2" placeholder="Address 2">
        </md-input-container>
        <div layout-gt-sm="row">
          <md-input-container class="md-block" flex-gt-sm>
            <label>City</label>
            <input ng-model="user.city">
          </md-input-container>
          <md-input-container class="md-block" flex-gt-sm>
            <label>State</label>
            <md-select ng-model="user.state">
              <md-option ng-repeat="state in states" value="{{state.abbrev}}">
                {{state.abbrev}}
              </md-option>
            </md-select>
          </md-input-container>
</form>

以材料设计为主题的表格形式动画

1 个答案: