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

您只需添加使标签100％宽度的CSS：

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

更新了 FIDDLE

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

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

1 个答案: