div 中的 Angular 材质/css 输入将在其他 div 上运行答案

【问题标题】：Angular material/css input inside Div going running over other divdiv 中的 Angular 材质/css 输入将在其他 div 上运行
【发布时间】：2017-12-24 00:01:12
【问题描述】：

.lat-long-divider{
  width:100px;
}
.lat-long-spacer{
  margin-right: 3px;
}

         <div class="ng-animate-disabled" layout flex>
                            <div layout >
                                <strong translate="LABELS.LAT" class="lat-long-spacer"></strong><strong class="lat-long-spacer">:</strong>
                        <inline-edit class="lat-long-divider"  identifier="'measurement-data'" value="$ctrl.asset" display="$ctrl.asset.latitude" value-name="' Latitude'" on-update="$ctrl.updateLat"></inline-edit>

                            </div>
                            <div layout>
                                <strong translate="LABELS.LONG" class="lat-long-spacer"></strong></strong><strong class="lat-long-spacer">:</strong>
                            <inline-edit class="lat-long-divider" identifier="'measurement-data'" value="$ctrl.asset" display="$ctrl.asset.longitude" value-name="' Longitude'" on-update="$ctrl.updateLong"></inline-edit>
                            </div>
                    </div>

我正在使用角度材料和布局行方法，因此纬度和经度都会在一行上，我使用一些基本的 css 将它们分开。问题是，根据 api 数据，有时 lat 和 long 数据都有小数点或没有小数点。根据要求，四舍五入不是一个选项。如果我在两者之间使用很长的空格，那么当纬度长数据的位数较少时，它们之间的大空格仍然存在。那么我怎样才能动态地做到这一点呢？使用 CSS 或角度材料。基本上，如果我可以在其每个父 div 中包含数据或通过某种 flex 方法动态创建空间

【问题讨论】：

sn-p 没有运行，你能做个小提琴吗？顺便说一句，我认为您的问题只是断词 css 属性

标签： html angularjs css angular-material

【解决方案1】：

.longName {
   font-size: 12px;
   font-weight: bold;
}
#inline-edit-measurement-data{
  width:100px
 }

  <div ng-if="$ctrl.identifier == 'measurement-data' && $ctrl.isEditing" >
        <md-input-container>
            <input type="number" aria-label="inline editor" id="inline-input-box" ng-model="$ctrl.display" ng-blur="$ctrl.focusOut()">
       <md-input-container flex>
            <input id="inline-edit-measurement-data" type="number" aria-label="inline editor" id="inline-input-box" ng-model="$ctrl.display" ng-blur="$ctrl.focusOut()">
         </md-input-container>
     </div>

几乎移除了 css 并为我拥有的内联编辑组件提供了宽度

【讨论】：