这是我的 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">✔</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>
最佳答案
你应该简单地添加
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;
}
关于jquery - 将带有链接的按钮分组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32589576/