html - 输入不会在列表 Ionic 中对齐

Question

我正在尝试在 Ionic 中创建一个列表，并且我已经为每一行添加了第二个 <input>，如您所见。

我想将该输入上的文本右对齐。 正如您在我附上的图片中看到的那样，中间的列带有 % 不会对齐。

<div class="list list-inset">
<label class="item item-input">
<span class="input-label1">-/50 mm</span>
<input type="text" id="prc_mm_50" style="text-
align:right; background-color:transparent;" disabled/>                      
<input type="number" id="mm_50" name="-/50 mm" 
placeholder="0" style="text-align:right;"/>                     
</label>                
<label class="item item-input">
<span class="input-label1">50/60 mm</span>
<input type="text" id="prc_mm_50_60" style="text-
align:right; background-color:transparent;" disabled/>                      
<input type="number" id="mm_50_60" name="50/60 mm" placeholder="0"        
style="text-align:right;"/>                     
</label>                
<label class="item item-input">
<span class="input-label1">60/70 mm</span>
<input type="text" id="prc_mm_60_70" style="text-
align:right; background-color:transparent;" disabled/>                      
<input type="number" id="mm_60_70" name="60/70 mm" 
placeholder="0" style="text-align:right;"/>                     
</label>  
</div> 

Codepen

Answer 1

您的屏幕截图与您的代码不符。此外，还有更有效的方法来完成您想要做的事情。例如一张 table 。无论如何，你没有得到你期望的原因是因为你没有相应地设置元素的显示类型。另外，不要做内联 css。这应该让你开始。

.item{
  display: block;
}

span, input{
  display: inline-block;
  vertical-align: top;
  
  /* Make it look like your screen shoot*/
  border: none;
  background: none;
  margin: 5px 12.5px;
  text-align: right;
}
.input-label1{
  width: 100px;
}

<div class="list list-inset">
<label class="item item-input">
  <span class="input-label1">-/50 mm</span>
  <input type="text" id="prc_mm_50" value="Some text" disabled/>
  <input type="number" id="mm_50" name="-/50 mm" placeholder="0" value="50"/>       
</label>                
<label class="item item-input">
  <span class="input-label1">50/60 mm</span>
  <input type="text" id="prc_mm_50_60" value="Some other text" disabled/>   
  <input type="number" id="mm_50_60" name="50/60 mm" placeholder="0" />         
</label>                
<label class="item item-input">
  <span class="input-label1">60/70 mm</span>
  <input type="text" id="prc_mm_60_70" disabled/> 
  <input type="number" id="mm_60_70" name="60/70 mm" placeholder="0" />           
</label>  
</div>