如何在 sencha touch 2 中左对齐复选框字段？答案

【问题标题】：How to left-align a checkboxfield in sencha touch 2?如何在 sencha touch 2 中左对齐复选框字段？
【发布时间】：2013-09-11 15:43:49
【问题描述】：

我只是想知道是否有人能够成功地将字段集中的复选框字段左对齐；我的尝试失败了。

{
xtype : 'checkboxfield',
name : 'remember',
label : 'Store information',
style: 'float: left'
}

图片更好：

【问题讨论】：

上传图片的ty。它澄清了你的问题。

标签： checkbox sencha-touch extjs sencha-touch-2 fieldset

【解决方案1】：

我能够将checkboxfield 与left 对齐。看看下面的代码...

 {
    xtype: 'checkboxfield',
    name : 'tomato',
    value: 'tomato',
    checked: true,
    label: 'Tomato',
    labelWidth: '70%',
    labelAlign: 'right'
 }

输出：-

【讨论】：

好吧；我也可以这样做；目标是在标签的“右侧”放置复选框，而不是右侧的标签。
标签右边的复选框是什么意思？默认情况下，它总是在标签的右边？你想达到什么目的？

【解决方案2】：

这里是 checkboxfield 默认 css（触摸 2.2.1）： `

.x-checkmark-base, .x-field-checkbox .x-field-mask::after, .x-field-radio .x-field-mask::after, .x-select-overlay .x-item-selected.x-list-item::after
{
position: absolute;
top: 0;
right: 10px;
bottom: 0;
content: '3';
font-family: 'Pictos';
font-size: 1.6em;
text-align: right;
line-height: 1.6em;
}

您可以将“right:10px”更改为“left:10px”。

在我的应用程序中，我将此 css 代码放在 index.html 中

.x-checkmark-base, .x-field-checkbox .x-field-mask::after, .x-field-radio .x-field-mask::after, .x-select-overlay .x-item-selected.x-list-item::after
{
right:auto !important;
left:10px !important;
}

【讨论】：

【解决方案3】：

在您的 CSS 中插入以下内容

.x-field .x-input-checkbox::after,  .x-field .x-input-checkbox:checked::after
 {
     right:auto;
 }

【讨论】：