为什么我的可折叠按钮会延伸到页面之外?

时间:2013-10-18 16:51:23

标签: jquery css jquery-mobile

这是一段代码摘录(我没有搞乱任何样式 - 用themeroller构建了jQM主题):

<div data-role="page" class="page-wrapper pages" id="design-online-start" data-theme="a">
<!--

    <div data-role="panel" data-display="reveal" data-position="left" id="concession-panel">
    <div class="picture-preview"></div>
</div>END: panel -->

<div class="block-top-strip flex"></div>
<div class="block-top flex">Custom Concessions</div>
<div class="block-top-second flex">Let's do this.</div>
<div class="ui-grid-solo">
    <div class="ui-block-a"><div class="ui-bar ui-bar-b price-display"></div></div>
    <div class="ui-block-a"><div class="ui-bar ui-bar-b"><div class="change-display-container"><div class="change-display"></div></div></div></div>
</div>
<form action="#" method="get">
    <div data-role="collapsible" data-collapsed="false" data-inset="false">
        <h3>Base Options</h3>
        <label for="flip-width">Width (ft):</label>
        <select name="flip-width" id="flip-width" data-role="slider" class="base-update base-update-val" data-post-title="Width">
            <option value="0">7'</option>
            <option value="200">8.5'</option>
        </select><br/>
        <label for="slider-length">Length (ft):</label>
        <div class="base-update">
        <input type="range" name="slider-length" id="slider-length" class="base-update-length" value="14" min="14" max="32" step="2" data-highlight="true" data-post-title="Length">
        </div>
        <label for="flip-nose">Nose Type: <a href="#popup-content-nose" data-rel="popup" data-role="button" data-inline="true" data-transition="pop" data-icon="info" data-iconpos="notext" data-mini="true">Learn more</a></label>
        <select name="flip-nose" id="flip-nose" data-role="slider" class="base-update base-update-val" data-post-title="Nose Type">
            <option value="0">Blunt</option>
            <option value="125">V</option>
        </select><br/>
    </div>
    <div data-role="collapsible" class="sections-expand" data-inset="false">
        <h2>Exterior</h2>
        <div data-role="collapsible" data-mini="true">
            <h4>Metal Options</h4>

            <label for="select-color" class="select">Color: <a href="#popup-content-color" data-rel="popup" data-role="button" data-inline="true" data-transition="pop" data-icon="info" data-iconpos="notext" data-mini="true">Learn more</a></label>

        <select name="select-color" id="select-color" data-native-menu="false" class="base-update base-update-bylength" data-post-title="Color">
                <option>Choose your color</option>
                <option value="0" id="white" selected>White</option>
                <option id="black" value="12">Black</option>
                <option id="red" value="12">Red</option>
                <option id="beige" value="12">Beige</option>
                <option id="green" value="12">Green</option>
                <option id="brandy-wine" value="12">Brandy Wine</option>
                <option id="pewter" value="12">Pewter</option>
                <option id="dove-grey" value="12">Dove Grey</option>
                <option id="indigo-blue" value="12">Indigo Blue</option>
                <option id="charcoal" value="12">Charcoal</option>
                <option id="snyder-orange" value="12">Snyder Orange</option>
                <option id="penske-yellow" value="12">Penske Yellow</option>
        </select>

enter image description here

这种情况发生在我的移动设备上。网页浏览器。我已经尝试将ui-btn类的宽度重新设置为97%左右,我已经尝试将其从所有其他包装器中删除。所有控制组等都 NOT 这样做。 只有可折叠。

0 个答案:

没有答案