Question

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 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并为我有的内联编辑组件提供了宽度

Div内部的角度材料/ css输入在其他div上运行

1 个答案: