Question

您好我在设置输入单选按钮的宽度时遇到了困难。

如你所见，我正在使用ui-grid-b。这里的问题是在ui-block-c ..在block-c中我插入了单选按钮的控制组。我想设置id'full'的单选按钮的宽度为60％，单选按钮id'half'为20％，单选按钮id'one'为20％..这意味着它总共100％等于ui-controlgroup-controls的宽度。我想使用ui-controlgroup-controls的最大宽度，每个单选按钮的宽度不同

        <style>
        .ui-grid-b>.ui-block-a {
            width: 25%;
        }
        .ui-grid-b>.ui-block-b, .ui-grid-b>.ui-block-c {
            width: 15%;
        }
        .ui-grid-b>.ui-block-c {
            width: 60%;
        }
        #myGroup {
            font-size: 84%;
        }
        #myGroup .ui-controlgroup-label{
            float: none;
            display: block;
            text-align: center;
            width: 100%;
        }
        #myGroup .ui-controlgroup-label legend{
            font-weight: bold;
            font-size: 130%;   
            width: 100%;
            margin-bottom: 8px;
        }
        #myGroup .ui-controlgroup-controls {
            float: none; 
            display: block;
            width: 100%;
        }
        #myGroup .ui-radio{
            width: 33.33%;
        }
        #myGroup .ui-radio label{
            text-align: center;
            white-space: nowrap;
        }
        </style>
        </head>

        <body>


        <div data-role="page" id="login">
            <div data-role="header" style="background-color:rgba(4, 165, 52, 0.86);">
                <h1 align="center">
                Header
                </h1>
            </div>
            <div data-role="content" class="content">
                <div class="ui-grid-b">
                    <div class="ui-block-a">
                    <input type="text" value="Input"/>
                    </div>

                    <div class="ui-block-b">
                    <a href="#" class="ui-btn"></a>
                    </div>


                    <div class="ui-block-c">
                        <div id="myGroup" data-role="fieldcontain"> 
                            <fieldset data-role="controlgroup" data-type="horizontal" data-mini="false" data-theme="b" data-corners="false"> <!-- strength -->
                                <input type="radio" name="full" id="full" value="" />
                                <label  for="full" >Full</label>

                                <input type="radio" name="half" id="half" value="" />
                                <label for="radio-view-b" >Half</label>

                                <input type="radio" name="one" id="one" value=""  />
                                <label for="one" >One</label>
                                </fieldset>
                            </div> 
                        </div>

                    </div>
                </div>

            <div class="footer" data-role="footer" data-position="fixed">
                <h1 align="center"><i>Footer</i></h1>
            </div>
        </div>

在ui-grid-b中具有不同宽度的radiobutton输入的jquery移动控制组

0 个答案: