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 class="btn-container">
    <!-- Your buttons -->
</div>

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

Working JSFiddle

将带有链接的按钮分组

1 个答案: