Question

我正在尝试在button header中添加collapsible list以及文字。但我希望按钮放在rightmost side。当我尝试这样做时，文本和按钮没有对齐。

编辑：值为"setting"的按钮未与文字"filtered list"对齐

我该如何解决问题？

Answer 1

工作示例：http://jsfiddle.net/Gajotres/kNDf4/

HTML：

<body>
    <div data-role="page">
        <div data-role="collapsible-set" data-theme="b" data-content-theme="d">
            <div data-role="collapsible">
                <h3 data-position="inline">Filtered list             
                    <span style="float:right;" class="button-span"> <input type='button' data-theme='b'  value='Settings' data-mini='true' data-inline='true' data-icon='gear' data-icon-pos='top' id="show-content"/>
                    </span>
                </h3>
                <ul data-role="listview" data-filter="true" data-filter-theme="c" data-divider-theme="d">
                    <li><a href="#">Adam Kinkaid</a></li>
                    <li><a href="#">Alex Wickerham</a></li>
                    <li><a href="#">Avery Johnson</a></li>
                    <li><a href="#">Bob Cabot</a></li>
                    <li><a href="#">Caleb Booth</a></li>
                </ul> 
            </div> 
        </div>
    </div>
</body>

<强> CSS：

.button-span {
    position: absolute;
    right: 0;
    margin-top: -7px !important;
}

.ui-btn-text {
    display: block; 
}

将文本与可折叠集jquery mobile中的按钮对齐

1 个答案: