输入场不占全宽：离子

Question

我有一个输入字段，它与一列有一行。它只占图像中所示的一半宽度。你能不能帮我确定一下我在这里缺少什么来使输入字段默认为全宽。

我的代码段

<div class="row">
    <div class="col">
        <div>Mobile Number</div>
        <div>
        <label class="float-right">
         <img class="edit-icon" src="./img/edit_blue.png">
        </label>
        <span> <input type="number"> </span>
        </div>
    </div>
</div>

输出

Answer 1

您可以将此代码添加到您的css：

input[type="number"] {
  width: 100%;
  display: table;
}

或尝试使用默认离子输入

<label class="item item-input">
  <input type="text" placeholder="First Name">
</label>