asp.net-mvc - JqueryMobile 复选框不喜欢 "data-inline"

Question

我正在使用 MVC 3/Razor 和 jquery-mobile 开发网络应用程序。在 jquery-mobile 中，通常您可以将 data_inline = "true" 添加到对象的属性中，这将防止元素一直延伸到屏幕上，如下所示:

@Html.DropDownListFor(m => m.value, options, new { data_inline = "true" })
@Html.ActionLink("Text", "Action", null, new {data_role="button", data_inline="true"})

这两个都很好用。但是在复选框上...

@Html.CheckBoxFor(m => m.value, new { data_inline = "true" })

...它似乎没有做任何事情，而且我仍然得到一个讨厌的拉伸(stretch)复选框。添加 data_role="button" 没有帮助(不是我所期望的那样)。

为什么会这样？有什么好方法可以让我的复选框在不诉诸手动 CSS 修改的情况下不被拉伸(stretch)？

Answer 1

jQM Checkbox 不支持data-inline。您需要做的就是将 label CSS 属性 display 更改为 inline-block。

<label class="inline">
    <input type="checkbox" name="chk0" class="ui-btn-inline" />Check me
</label>

.inline {
    display: inline-block !important;
}