用 link 对按钮进行分组

Question

这是我的 jsFiddle。如您所见，按钮让一切都崩溃了。

我的尝试是：

button {
    left: 50%;
    position: inherit;
    top: 50%;
}

但这并没有多大帮助！我应该怎么做？

这里也是 HTML:

<body>
    <div data-role="page" id="pageone"> 
        <div data-role="main" class="ui-content">
            <div class="ui-grid-solo" id="slots">
                <div class="ui-block-a">
                    <ol data-role="listview" data-inset="true">
                        <li data-role="list-divider">Europe</li>
                        <li class="ui-btn-icon-left"><a href="#">Kahn</a></li>
                        <li class="ui-btn-icon-left"><a href="#">Ferdinand</a></li>
                        <li class="ui-btn-icon-left"><a href="#">Nesta</a></li>
                    </ol>

                    <button class="depth" type="button">&#10004;</button>

                    <a href="#popupNested" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-info ui-btn-icon-left ui-btn-b" data-transition="slidedown">Info</a>
                    <div data-role="popup" id="popupNested" data-theme="none">
                        <div data-role="collapsibleset" data-theme="b" data-content-theme="a" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" style="margin:0;">
                            <div data-role="collapsible" data-inset="false">
                                <h2>Log in</h2>
                                <ul data-role="listview" data-icon="false">
                                    <li><a href="#" data-rel="dialog">To sign up,<br>contact Samaras!</a></li>
                                </ul>
                            </div><!-- /collapsible -->                 
                        </div><!-- /collapsible set -->
                    </div><!-- /popup -->

                    <ol data-role="listview" data-inset="true">
                        <li data-role="list-divider">Europe</li>
                        <li class="ui-btn-icon-left"><a href="#">Kahn</a></li>
                        <li class="ui-btn-icon-left"><a href="#">Ferdinand</a></li>
                        <li class="ui-btn-icon-left"><a href="#">Nesta</a></li>
                    </ol>
                </div> 
            </div>
        </div>
    </div>
</body>

Answer 1

您只需添加

position: absolute;
left: calc(50% - 40px);
top: 35px;

到你的 CSS，就在这里：

button.depth {
    /* Here */
}

这是您的 JSFiddle 进行了这些更改

为避免使用绝对定位，您可以通过 display: inline-block

将按钮包裹在 div 中来解决这个问题

<div class="btn-container">
    <!-- Your buttons -->
</div>

.btn-container {
    display: inline-block;
}

Working JSFiddle.

用 link 对按钮进行分组

Group a button with a link

css

jquery

css-position