鍍金池/ 問答/HTML/ antd-mobile InputItem 文字如何靠右顯示?

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

使用 antd-mobile 的 InputItem 組件時發(fā)現(xiàn)沒有屬性可以控制文字靠右顯示,我的代碼如下:

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

最終效果是這樣的:

圖片描述

希望實現(xiàn)的效果如下:

圖片描述

這是需要自己自定義什么樣式嗎?還是有現(xiàn)成的屬性可以使用?

回答
編輯回答
孤慣

text-align: right

2018年1月30日 18:22
編輯回答
怣人

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

2017年10月13日 20:24
編輯回答
陪妳哭

text-align: right

2017年7月3日 18:20
編輯回答
司令

很簡單!

.your-input-style input {

text-align: right!important;

}

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

自定義螞蟻金服輸入框組件樣式

</InputItem>

2018年6月5日 02:46
編輯回答
大濕胸

沒有支持的只能強行改antd的樣式

2017年5月26日 16:29
編輯回答
風清揚

請問你能正常使用了嗎

2018年4月12日 09:12