将复选框标签的大小调整为网格列大小

Question

我对复选框按钮使用 <fieldset data-role="controlgroup" data-type="horizontal"> 选项，因为我想隐藏我的复选框并突出显示选中的按钮。当然这很好用，但是我怎样才能将标签的大小调整为网格列的大小（使用 ui-grid-c）。

代码示例： https://jsfiddle.net/sebsti/z0Lywgd1/

<!doctype html>
<html lang="en"> 
   <head>
   <meta charset="utf-8">
   <!-- Include meta tag to ensure proper rendering and touch zooming -->
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <!-- Include jQuery Mobile stylesheets -->
   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
   <!-- Include the jQuery library -->
   <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
   <!-- Include the jQuery Mobile library -->
   <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
    <div data-role="main" class="ui-content">
                <div class="ui-grid-c">
                    <div class="ui-block-a"></div>
                    <div class="ui-block-b">
                            <fieldset data-role="controlgroup" data-type="horizontal" >
                                <input type="checkbox" name="checkbox-h-1a" id="checkbox-h-1a">
                                <label for="checkbox-h-1a">Option 1</label>
                            </fieldset>
                            <fieldset data-role="controlgroup" data-type="horizontal" >
                                <input type="checkbox" name="checkbox-h-1b" id="checkbox-h-1b">
                                <label for="checkbox-h-1b">Option 2</label>
                            </fieldset>
                            <input type="checkbox" name="checkbox-h-1c" id="checkbox-h-1c">
                            <label for="checkbox-h-1c" class="width">Like this</label>
                    </div>
                    <div class="ui-block-c ">
                            <fieldset data-role="controlgroup" data-type="horizontal" >
                                <input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a">
                                <label for="checkbox-h-2a">Option 3</label>
                            </fieldset>
                            <fieldset data-role="controlgroup" data-type="horizontal" >
                                <input type="checkbox" name="checkbox-h-2b" id="checkbox-h-2b">
                                <label for="checkbox-h-2b" class="width">Option 4</label>
                            </fieldset>
                                <input type="checkbox" name="checkbox-h-2c" id="checkbox-h-2c">
                                <label for="checkbox-h-2c" class="width">Like this</label>
                    </div>
                    <div class="ui-block-d"></div>
                </div>
   </div>
</div>
</body>

</html>

Answer 1

您只需添加 CSS 即可使标签宽度达到 100%：

.ui-controlgroup .ui-checkbox label {
    width: 100%;
    margin-left: 5px; 
}

Updated FIDDLE

注意：如果您实际上没有与常规复选框对齐，则可能不需要左边距...

将复选框标签的大小调整为网格列大小

Adjust size of checkbox label to grid column size

css

jquery-mobile

jquery-mobile-button