gpt4 book ai didi

jquery - 将带有链接的按钮分组

转载 作者:太空宇宙 更新时间:2023-11-04 11:23:18 25 4
gpt4 key购买 nike

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

我的尝试是:

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

但这并没有多大帮助!我应该怎么做?

enter image description here

这也是 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>

最佳答案

你应该简单地添加

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 .

关于jquery - 将带有链接的按钮分组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32589576/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com