gpt4 book ai didi

html - 将两个按钮一个放在另一个的顶部

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

如何让两个按钮在一个范围内一个显示在另一个上方?两个按钮的大小也应该相同。我试过 vertical-align:middle 和 display:inline-block 但没有成功。最终目标是左边有一个列表,中间有两个按钮,右边有一个列表。中间的按钮将是“添加”和“删除”并在两个列表之间移动元素。我找到了 this链接,但它于 2004 年更新,似乎是一种非常糟糕的方式。我已经搜索了一段时间,我一定不是在寻找正确的东西,所以一些指导将不胜感激。

最佳答案

这里有两个按钮一个在另一个上面对齐。

两个列表之间的第一个:
http://jsfiddle.net/xGXER/

<!DOCTYPE html>
<html>
<head>
<title>Buttons in between</title>
</head>
<body>
<ul style="background: #afa; display: inline-block; width: 100px; vertical-align: top;">
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>

<span style="display: inline-block; width: 70px; background: #6af; vertical-align: top;">
<button style="width: 70px;">Add</button>
<button style="width: 70px;">Remove</button>
</span>

<ul style="background: #afa; display: inline-block; width: 100px; text-align: right; vertical-align: top;">
<li>Ein</li>
<li>Zwei</li>
<li>Drei</li>
<li>Vier</li>
</ul>
</body>
</html>


...然后在两个跨度之间:
http://jsfiddle.net/JtXj2/

<!DOCTYPE html>
<html>
<head>
<title>Buttons in between spans</title>
</head>
<body>
<span style="background: #f06; vertical-align: top;">Foo bar has left the building</span>
<span style="display: inline-block; width: 70px; height: 52px; background: #06f;">
<button style="width: 70px;">Add</button>
<button style="width: 70px;">Remove</button>
</span>
<span style="background: #0f0; vertical-align: top;">Bar hopping is what we do at Friday nights</span>
</body>
</html>

关于html - 将两个按钮一个放在另一个的顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8158049/

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