antd-mobile InputItem 文字如何靠右显示?

使用 antd-mobile 的 InputItem 组件时发现没有属性可以控制文字靠右显示,我的代码如下:

<List>
  <InputItem
    {...getFieldProps('inputclear')}
    clear
    extra=""
    placeholder=""
    labelNumber={7}
  >
    <p style={{ color: "#ccc" }}>报名人姓名</p>
  </InputItem>
</List>
<List>
  <Picker
    data={gender}
    value={this.state.gender}
    cols={1}
    {...getFieldProps('gender')}
    className="forss"
  >
    <List.Item arrow="horizontal">
      <p style={{ color: "#ccc" }}>报名人性别</p>
    </List.Item>
  </Picker>
</List>
<List>
  <Picker data={idType} cols={1} {...getFieldProps('gender')} className="forss">
    <List.Item arrow="horizontal">
      <p style={{ color: "#ccc" }}>报名人证件类型</p>
    </List.Item>
  </Picker>
</List>
<List>
  <InputItem
    {...getFieldProps('inputclear')}
    clear
    extra=""
    placeholder=""
    labelNumber={7}
  >
    <p style={{ color: "#ccc" }}>报名人证件号</p>
  </InputItem>
</List>

最终效果是这样的:

图片描述

希望实现的效果如下:

图片描述

这是需要自己自定义什么样式吗?还是有现成的属性可以使用?

阅读 14.3k
7 个回答

text-align: right

很简单!

.your-input-style input {

text-align: right!important;

}

<InputItem className="your-input-style">

自定义蚂蚁金服输入框组件样式

</InputItem>

没有支持的只能强行改antd的样式

新手上路,请多包涵

请问你能正常使用了吗

moneyKeyboardAlign:文字排版起始方向, 只有 type='money' 支持, 可选为 'left', 'right'

text-align: right

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题